pdfmake中存在特殊字符时文件名错误

Question

我想使用 pdfmake 库下载 PDF 文件。但是我有一个用例，其中文件名可以包含特殊字符（“，？，，*）。在边缘浏览器中，当我下载 pdf 文件时，它会以错误的名称下载。 例如，

function downloadPdf () {
    pdfMake.fonts = {
        ArialUnicode: {normal: "arialunicode.ttf"}
    };

    var docDefinition = {
        content: [
            {text:"This is a sample text."}
        ],
        defaultStyle: {font: "ArialUnicode"}
    };

    pdfMake.createPdf(docDefinition).download('"sample".pdf');
}

对于此类示例，Chrome 和 Firefox 下载带有 _sample_.pdf 名称的 pdf，但在 MS Edge 浏览器中，它会使用 6c94f320-8f12-4722-8f44-23da34d663c1.pdf 下载。

这是浏览器或 pdfmake 的问题吗？我认为 pdfmake 在内部使用 filesaver.js 在客户端下载 blob 数据。那么我需要做什么修复呢？

提前致谢。

Answer 1

我使用您的代码为您创建了一个演示。在这个演示中，有 2 个按钮。在第一个按钮上，有与您在答案中的问题中提到的完全相同的 JavaScript 代码，我刚刚删除了名称中的双引号。

换句话说，我已将 download('"sample".pdf') 更改为 download('sample.pdf')，并且它在 Edge 中对我来说可以正常工作。你可以自己试试。

function downloadPdf() {
//    pdfMake.fonts = {
//        ArialUnicode: {normal: "arialunicode.ttf"}
//    };

    var docDefinition = {
        content: [
            {text:"This is a sample text."}
        ],
        defaultStyle: {
//            font: "ArialUnicode"
        }
    };

    pdfMake.createPdf(docDefinition).download('"sample".pdf');
}

function downloadPdfUpdated() {
//    pdfMake.fonts = {
//        ArialUnicode: {normal: "arialunicode.ttf"}
//    };

    var docDefinition = {
        content: [
            {text:"This is a sample text."}
        ],
        defaultStyle: {
//            font: "ArialUnicode"
        }
    };
    var fileName = '"sample".pdf';
    fileName = fileName.split(/\.(?=[^\.]+$)/)[0].replace(/[^a-z0-9]/gi, '_').toLowerCase();
  pdfMake.createPdf(docDefinition).download(fileName);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
<button onclick="downloadPdf()">PDF with your code</button>
<button onclick="downloadPdfUpdated()">PDF with updated code</button>

Codepen Example