Is there a way to set a file name when jspdf output()

Question

My site draws a column chart. I have a button to save it as a PDF file showing it before saving.

The way it works now is this.

1. google.visualization draws the chart.
2. html2canvas takes a screenshot of the chart.
3. jsPDF inserts the screenshot in a PDF file and shows it to the user.

The problem is the name of the PDF file. It is something like 5d78c1eb-0829-4e7e-8ffc-71cf1f102f56.pdf and the url is blob:http://example.com/5d78c1eb-0829-4e7e-8ffc-71cf1f102f56 When user sees the PDF and clicks save he receives this awful file name.

Now I show the PDF this way:

window.open(doc.output('bloburl'), '_blank');

I can set desired file name if I change this line to this:

doc.save('sample-file.pdf');

But in such a case the file just downloads but I need to show it first.

Is there a way to show the PDF and give it a desirable name? I tried this:

window.open(doc.output('bloburl', {filename: 'myFileName.pdf'}), '_blank');

But it did not help.

Another way I see is not showing the PDF from jsPDF, but sending images to the server and making a PDF file there using TCPDF. The files made with TCPDF can have a name I give it, but I think it is dumb to send the images there and back.

So the question is how can I make a PDF and show it to the user with the name I want?

Ganley

You can set the title like this: pdf.setProperties({ title: 'test' }); – Badajoz

I use this command and it shows the title in the browser tab and in the pdf plugin toolbar but not in the address line and when I press download it uses that abracadabra as the file name. Now I am searching a way to show you a picture. – Karyotype

Here is the picture ic.pics.livejournal.com/llill/8858779/1953/1953_900.png – Karyotype

that's bloburl. I am not sure you can change that. the new jsPDF release has an output named pdfjsnewwindow. you may be able to update the code and add a user-defined file name for downloading. – Badajoz

@РоманЗабигалюк hello friend, did you find a solution? i have the same problem... – Almond

Any solutions I'm having the same issue – Aurel

Comment by @weihui-guo worked for me! Thanks! – Steeplejack

Answer 1

At the moment the answer is no. You can download it directly, as mentioned in the accepted answer of this question: Download with filename

But you create an objectUrl and therefore the filename is always the url. Maybe you could create an browser-extension for this...but I haven't had the time to try yet. Furthermore, you can't expect your visitors to have the extension installed.

Evangelia

Answer 2

This works for me

doc.setProperties({
        title: "MyTitle.pdf"
    }).html(element, {
        callback: function (doc) {
            window.open(doc.output('bloburl'), "_blank");
        },
});

Abjuration

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Ehrenberg

A little more context would help, fella. I tried this but the callback didn't run. Maybe you could explain? – Nuclide

[Vue warn]: Error in v-on handler (Promise/async): "ReferenceError: element is not defined" – Nuclide