Question

我想使用pdfmake库下载PDF文件。但是我有一个用例，其中文件名可以包含特殊字符（“，？，<，>，*）。在Edge浏览器中，当我下载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代码完全相同的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

pdfmake中有特殊字符时，文件名错误

1 个答案: