javascript - pdf file is corrupted when a file encoded in base64 is downloaded - Stack Overflow

admin管理员组

文章数量:1432001

I try to download a pdf file that has been previously encoded using base 64.

I try to download it from an anchor tag, as follows

<a href="data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9..." download="file.pdf">Download</a>;

The file is downloaded but when I try to open it I get a message that the file has damage or is corrupted.

Interestingly, if I change href to an encode image data, the file is downloaded and opened as expected.

I found this example / and I see that is changed from data:application/pdf;base64, to data:application/octet-stream;base64, I tried but I am getting the same result.

Update

I am encode the pdf file as follows

const element = document.querySelector('#file'); // input type file

element.addEventListener('change', handleChange);

function handleChange() {
    const file = this.files[0];
    const fileReader = new FileReader();

    fileReader.onload = function() {
        const data = this.result;

        //  store data in database in a text type field
    };

    fileReader.readAsDataURL(file);
}

hen, in the view where I want to download the file, I realize the logic that I mented

I try to download a pdf file that has been previously encoded using base 64.

I try to download it from an anchor tag, as follows

<a href="data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9..." download="file.pdf">Download</a>;

The file is downloaded but when I try to open it I get a message that the file has damage or is corrupted.

Interestingly, if I change href to an encode image data, the file is downloaded and opened as expected.

I found this example http://jsfiddle/filixix/0816jdfq/ and I see that is changed from data:application/pdf;base64, to data:application/octet-stream;base64, I tried but I am getting the same result.

Update

I am encode the pdf file as follows

const element = document.querySelector('#file'); // input type file

element.addEventListener('change', handleChange);

function handleChange() {
    const file = this.files[0];
    const fileReader = new FileReader();

    fileReader.onload = function() {
        const data = this.result;

        //  store data in database in a text type field
    };

    fileReader.readAsDataURL(file);
}

hen, in the view where I want to download the file, I realize the logic that I mented

• javascript
• mysql

Share Improve this question Follow edited Dec 27, 2018 at 23:51 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Dec 27, 2018 at 23:06 MarioMario 4,99633 gold badges4242 silver badges6262 bronze badges 11

• 1 How do you know that it isn't corrupted or damaged to begin with? – Charlie Fish Commented Dec 27, 2018 at 23:17
• 1 How did you verify the data is correct? – Charlie Fish Commented Dec 27, 2018 at 23:29
• 1 @user615274 can You put somewhere that pdf base64 content? I think that pdf is corrupted because of You keep it somewhere in db and it's being cut by size limits – num8er Commented Dec 27, 2018 at 23:32
• 1 And probably more importantly, how are you encoding the binary data to base64? Where and how are you assigning it to the href attribute? – Phil Commented Dec 27, 2018 at 23:32
• 1 The problem is definitely in the "binary to b64" step, the download step don't even look at the mime type set in your dataURL's header. Please show where this step is performed. Also, if it is done server-side, prefer to send the binary file directly (if from same domain, just set the download attribute to the url pointing to the file), and if you generated that file on client side, then keep it as a Blob and use a blobURL instead of a dataURL. – Kaiido Commented Dec 27, 2018 at 23:41

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 6

General idea works as expected.

But I remend You to keep pdf as file.

Cause Your corrupted pdf issue may be because of db field size (if You keep that string in db) or browser's request url limitations

So You're saying:

store data in database in a text type field

If You don't plan to move to file storage just change field type to: LONGBLOB

本文标签： javascriptpdf file is corrupted when a file encoded in base64 is downloadedStack Overflow