DevExpress ASPxSpreadsheet中HTML链接无法打开问题排查与方案咨询

可能的问题点 #

1. JavaScript调用语法错误
   你的C#代码生成的javascript:链接中，字符串参数未加引号。比如filename为"test.pdf"时，最终生成的调用是javascript:openFile(test.pdf)，这会把test.pdf当成未定义变量，直接触发语法错误。

2. DevExpress安全限制拦截脚本链接
   ASPxSpreadsheet默认可能阻止javascript:协议的超链接（防范XSS风险），导致点击后无响应。

修复方案 #

方案1：修正JavaScript调用语法 #

修改C#代码，给字符串参数添加单引号，并转义文件名中可能存在的单引号，避免破坏脚本结构：

CellRange nameFileCellRange = secondWorksheet.Cells["C7"];
nameFileCellRange.Value = "Drawing: " + fileName;

// 转义文件名中的单引号，避免语法错误
string escapedFileName = fileName.Replace("'", "\\'");
Hyperlink nameFileHyperlink = secondWorksheet.Hyperlinks.Add(
    nameFileCellRange, 
    $"javascript:openFile('{escapedFileName}')", 
    true, 
    filename
);
nameFileHyperlink.TooltipText = "open";

方案2：启用脚本超链接支持 #

在ASPX页面的ASPxSpreadsheet控件中，配置安全与行为设置，允许脚本超链接：

<dx:ASPxSpreadsheet ID="YourSpreadsheetID" runat="server">
    <SettingsSecurity AllowJavaScriptHyperlinks="true" />
    <SettingsBehavior AllowHyperlinkNavigation="true" />
    <!-- 其他控件配置 -->
</dx:ASPxSpreadsheet>

替代方案：通过客户端事件处理点击 #

如果脚本链接仍被限制，可通过HyperlinkClick客户端事件拦截自定义链接，执行打开逻辑：

1. C#端设置自定义链接

CellRange nameFileCellRange = secondWorksheet.Cells["C7"];
nameFileCellRange.Value = "Drawing: " + fileName;

// 用自定义前缀标记链接，避免默认跳转
string escapedFileName = fileName.Replace("'", "\\'");
Hyperlink nameFileHyperlink = secondWorksheet.Hyperlinks.Add(
    nameFileCellRange, 
    $"custom://{escapedFileName}", 
    true, 
    filename
);
nameFileHyperlink.TooltipText = "open";

2. 客户端事件处理

<dx:ASPxSpreadsheet ID="YourSpreadsheetID" runat="server" ClientInstanceName="spreadsheet">
    <ClientSideEvents HyperlinkClick="onHyperlinkClick" />
</dx:ASPxSpreadsheet>

<script type="text/javascript">
function onHyperlinkClick(s, e) {
    const url = e.hyperlinkInfo.uri;
    // 识别自定义前缀的链接
    if (url.startsWith("custom://")) {
        e.cancel = true; // 取消默认跳转行为
        const fileName = url.substring("custom://".length);
        openFile(fileName);
    }
}

function openFile(fileName) {
    console.log("hi");
    const _url = "./TraceabilityNP.aspx?id=" + encodeURIComponent(fileName);
    const _name = "VIEWFILE";
    const w = 600;
    const h = 400;

    const x = window.open(_url, _name, `width=${w}, height=${h}`);
    if(x) x.focus(); // 避免弹窗拦截时报错
}
</script>

内容的提问来源于stack exchange，提问作者Wonderweis