时间戳

首页 > 解决方案 > 下载文件时元素无法自动识别文件扩展名

javascript - 下载文件时元素无法自动识别文件扩展名

问题描述

我目前正在开发一个应用程序，其中用户单击一个元素，该元素调用一个 JS 函数并且该函数处理文件下载。

这些文件是由Devexpress XtraReports 模块动态生成的报告，转换为 Base64，然后发送回客户端。当客户端接收到Base64字符串时，JS函数会创建一个<a>元素，设置href属性data:application/pdf;base64,JVBERi0xLjQNCiWio[...]并模拟点击click()事件。

这是处理文件下载的一段 JS 代码：

let downloadLink;

    try {
        downloadLink = executionId ? await getLinkPdfBase64(executionId) : false;
    } catch (error) {
        downloadLink = false;
        console.log(error);
    }

    if (downloadLink) {
        const aElement = document.createElement("a");
        downloadLink = "data:application/pdf;base64," + downloadLink;
        aElement.setAttribute("download", currentReportData.LayoutName);
        aElement.setAttribute("href", downloadLink);
        aElement.click();
        aElement.remove();
    } else {
        DevExpress.ui.dialog.alert( //Ignore this, it's a Devexpress component
            "Your report could not be generated",
            "Alert"
        );
    }

问题是：

当我生成具有自定义参数类型的报告时，Devexpress 会正确生成它（Base64，如果转换为字符串，显然格式正确），但浏览器（Google Chrome）会下载扩展名为".0"的文件。

如果报告具有正常的 Devexpress 参数（如字符串、Int32、Guids 等），则下载的文件具有正确的“.pdf”扩展名。

这是正确下载的 PDF 和“.0”扩展名文件的图片：

示例错误图片

是 JS 函数导致问题还是解决问题的方法？如果没有，几乎可以肯定报告生成器（Devexpress）会出现问题。

注意：如果我手动将“.0”扩展名更改为“.pdf”，文件将打开并正确显示/形成。

标签： javascripthtmlpdfdevexpressdevexpress-mvc

解决方案

原来我只是通过在属性中添加文件扩展名“.pdf”download来解决它，所以当浏览器无法识别它时，你已经在指定它是哪一个：

aElement.setAttribute("download", currentReportData.LayoutName + ".pdf");

推荐阅读