download a pdf with filesaver.js and blob

Question

I'm trying to download a file with Filesaver.js. And when I try to do this with csv, it works fine. But I need to download a pdf now.

How can I do that? I use Filesaver.js with a blob object, my code looks something like this:

var filename = "myfile.csv";
var s = "my csv text content";
var blob = new Blob([s], {type "text/csv;charset=utf-8"});
var filesaver = saveAs(blob,filename);

I'd like to know what kind of data type should I pass to the blob onject, when I'd like to download the pdf.

Solution 1

 var blob = new Blob([response.data], {type: "application/pdf;charset=utf-8"});
 var blob = new Blob([response.data], {type: "text/plain;charset=utf-8"});

Both are ok,but header should be

{responseType:"arraybuffer"}

Solution 2

PDF is completely another format and FileSaver's only mission is saving files.

You can use jsPDF library to do that. This is how you could use it in your case:

var filename = "myfile.csv";
var s = "my csv text content";

var pdf = new jsPDF();
pdf.text(10, 10, s);
pdf.save(filename.replace(".csv", ".pdf"));

Solution 3

Data type should be application/pdf of course.

The content should be on base64 so the blob should start with

data:application/pdf;base64,

As you can see in the jspdf library source code.

Enjoy the demo.