javascript - Download and save file in browser's local storage - Stack Overflow

admin管理员组

文章数量:1431037

I have a Java web app that serves a file:

@RequestMapping(value = "/pdf/download", method = RequestMethod.GET)
public void download(
        HttpServletRequest request, 
        HttpServletResponse response, 
        @RequestParam(value = "id", required = true) Long id) throws IOException {

    File pdfFile = pdfFileManager.getFromId(id);

    response.setContentType("application/pdf");
    response.addHeader("Content-Disposition", "attachment; filename=download");
    response.setContentLength((int) pdfFile.length());

    FileInputStream fileInputStream = null;
    OutputStream responseOutputStream = null;

    try {   
        fileInputStream = new FileInputStream(pdfFile);
        responseOutputStream = response.getOutputStream();

        int bytes;
        while ((bytes = fileInputStream.read()) != -1) {
            responseOutputStream.write(bytes);
        }

        responseOutputStream.flush();
    } finally {
        fileInputStream.close();
        responseOutputStream.close();
    }
}

I retrieve the file in the client and base64 encode it using FileReader:

$.ajax({
    url: "/pdf/download?id=" + id,
    dataType: "application/pdf",
    processData: false
}).always(function(response) {
    if(response.status && response.status === 200) {
       savePdf(response.responseText, "download_" + id);
    } 
}); 

function savePdf(pdf, key) {
    var blob = new Blob([pdf], {type: "application/pdf"});
    var fileReader = new FileReader();

    fileReader.onload = function (evt) {
        var result = evt.target.result;

        try {
            localStorage.setItem(key, result);
        } catch (e) {
            console.log("Storage failed: " + e);
        }
    };

    fileReader.readAsDataURL(blob);
}

The problem is that the value saved in the local storage is not correct. The encoded data differs from the one i get when i upload the PDF using this snip. I don't know if the problem is how i serve the file or the encoding process in the client.

The value stored is something like this

data:application/pdf;base64,JVBERi0xLjQKJe+/ve+/ve+/ve+/vQoxIDAgb...

instead of

data:application/pdf;base64,JVBERi0xLjQKJeHp69MKMSAwIG9iago8PC9Ue...

I have a Java web app that serves a file:

@RequestMapping(value = "/pdf/download", method = RequestMethod.GET)
public void download(
        HttpServletRequest request, 
        HttpServletResponse response, 
        @RequestParam(value = "id", required = true) Long id) throws IOException {

    File pdfFile = pdfFileManager.getFromId(id);

    response.setContentType("application/pdf");
    response.addHeader("Content-Disposition", "attachment; filename=download");
    response.setContentLength((int) pdfFile.length());

    FileInputStream fileInputStream = null;
    OutputStream responseOutputStream = null;

    try {   
        fileInputStream = new FileInputStream(pdfFile);
        responseOutputStream = response.getOutputStream();

        int bytes;
        while ((bytes = fileInputStream.read()) != -1) {
            responseOutputStream.write(bytes);
        }

        responseOutputStream.flush();
    } finally {
        fileInputStream.close();
        responseOutputStream.close();
    }
}

I retrieve the file in the client and base64 encode it using FileReader:

$.ajax({
    url: "/pdf/download?id=" + id,
    dataType: "application/pdf",
    processData: false
}).always(function(response) {
    if(response.status && response.status === 200) {
       savePdf(response.responseText, "download_" + id);
    } 
}); 

function savePdf(pdf, key) {
    var blob = new Blob([pdf], {type: "application/pdf"});
    var fileReader = new FileReader();

    fileReader.onload = function (evt) {
        var result = evt.target.result;

        try {
            localStorage.setItem(key, result);
        } catch (e) {
            console.log("Storage failed: " + e);
        }
    };

    fileReader.readAsDataURL(blob);
}

The problem is that the value saved in the local storage is not correct. The encoded data differs from the one i get when i upload the PDF using this snip. I don't know if the problem is how i serve the file or the encoding process in the client.

The value stored is something like this

data:application/pdf;base64,JVBERi0xLjQKJe+/ve+/ve+/ve+/vQoxIDAgb...

instead of

data:application/pdf;base64,JVBERi0xLjQKJeHp69MKMSAwIG9iago8PC9Ue...

• javascript
• ajax
• spring-mvc
• download
• local-storage

Share Improve this question Follow edited Nov 17, 2015 at 22:28 BalusC 1.1m376376 gold badges3.7k3.7k silver badges3.6k3.6k bronze badges asked Nov 17, 2015 at 14:57 jorgeprjorgepr 30744 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Solved the problem setting the request's response type to blob:

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "/pdf/download?id=" + id); 
xhr.responseType = "blob";
xhr.onload = function() {
    if(xhr.status && xhr.status === 200) {
        savePdf(xhr.response, "download_" + id);
    } 
}
xhr.send();

function savePdf(pdf, key) {
    var fileReader = new FileReader();

    fileReader.onload = function (evt) {
        var result = evt.target.result;

        try {
            localStorage.setItem(key, result);
        } catch (e) {
            console.log("Storage failed: " + e);
        }
    };

    fileReader.readAsDataURL(pdf);
}

本文标签： javascriptDownload and save file in browser39s local storageStack Overflow