CODEWITHSUNDEEP
javascriptpdfmakefilesaver.js
Suhas Bhattu
Suhas Bhattu

Reputation: 551

File name gets wrong when special characters are there in pdfmake

I want to download a PDF file using the pdfmake library. But I have a use case where filename can contain special characters (",?,<,>,*). In the Edge Browser, when I download pdf file, it gets downloaded with a wrong name. Example,

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');
}

For this kind of example, Chrome and Firefox download pdf with _sample_.pdf name, but in the MS Edge browser, it gets downloaded with 6c94f320-8f12-4722-8f44-23da34d663c1.pdf.

Is this issue with browser or the pdfmake? I think pdfmake internally uses filesaver.js for downloading the blob data on client-side. So what fix do I need to make?

Thanks in advance.

Upvotes: 1

Views: 3273

Answers (1)

Sami Ahmed Siddiqui
Sami Ahmed Siddiqui

Reputation: 2386

I have created a demo for you by using your code. In this demo, there are 2 buttons. On the first button, there is exactly the same JavaScript code as you have mentioned in your question in the answer, I have just removed the double quotes from the name.

In other words, I have changed download('"sample".pdf') with download('sample.pdf') and it works fine in Edge for me. You may try that by yourself.

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

Upvotes: 1

Related Questions