javascript - Open jsPDF created pdf in Chrome's new tabwindow

How can I open with javascript link data:application/pdf;filename=generated.pdf;base64;DATA in Chrome 71?
Link from console opened successfully, but not from code - unfortunately.
The snippet does not work for security reason. Only for code demonstration.
I read some similar questions, but did not find an answer.

var button = document.getElementById("button");

button.addEventListener("click", generate, false);

function generate() {

  var doc = new jsPDF({
    orientation: "l",
    unit: "mm"
  });

  doc.text('ACT', 130, 20);
  var string = doc.output('datauristring');
  console.log(string);
  var link = document.createElement('a');
  link.href = string;
  link.setAttribute('target', '_blank');
document.body.appendChild(link);
  link.click();
  link.parentNode.removeChild(link);
}

<script src="/[email protected]/dist/jspdf.min.js"></script>
<button id="button">Generate pdf table</button>

var button = document.getElementById("button");

button.addEventListener("click", generate, false);

function generate() {

  var doc = new jsPDF({
    orientation: "l",
    unit: "mm"
  });

  doc.text('ACT', 130, 20);
  var string = doc.output('datauristring');
  console.log(string);
  var link = document.createElement('a');
  link.href = string;
  link.setAttribute('target', '_blank');
document.body.appendChild(link);
  link.click();
  link.parentNode.removeChild(link);
}

<script src="https://unpkg.com/[email protected]/dist/jspdf.min.js"></script>
<button id="button">Generate pdf table</button>

Share Improve this question edited Feb 9, 2019 at 4:00 Weihui Guo 3,9976 gold badges38 silver badges60 bronze badges asked Feb 8, 2019 at 11:27 eustatos 7041 gold badge11 silver badges23 bronze badges

Not allowed to navigate top frame to data URL – Weihui Guo Commented Feb 13, 2019 at 1:45

Add a comment |

6 Answers 6

Sorted by: Reset to default 11

Try window.open() instead. The following code worked for me. You will need to modify the window/page size.

let dataSrc = pdf.output("datauristring");
let win = window.open("", "myWindow");
win.document.write("<html><head><title>jsPDF</title></head><body><embed src=" + 
    dataSrc + "></embed></body></html>");

Update:

Didn't realize that jsPDF comes with a built-in method pdf.output('dataurlnewwindow');, which uses iframe,

The downside of pdf.output('dataurlnewwindow') is that it opens a new tab/window with datauristring as the pdf file name and the download button doesn't work, while window.open(pdf.output('bloburl')) seems fine with the download button.

Okay, pdf file can be renamed like this:

pdf.setProperties({
    title: "jsPDF sample"
});

Update 2:

To avoid the page being cut off when a page is zoomed, you can set the html2canvas scale accordingly.

It's actually very easy, don't complicate things..

window.open(URL.createObjectURL(doc.output("blob")))

or a more verbose and less efficient version:

let newWindow = window.open('/');
fetch(doc.output('datauristring')).then(res => res.blob()).then(blob => {
    newWindow.location = URL.createObjectURL(blob);
})

(You need to open the new window immediately after the onclick or Chrome will block the popup. This solution is not as good because there is an unnecessary conversion from datauri to blob)

This code works for me

  var doc = new jsPDF();
  doc.setProperties({
  title: "new Report"
  });
  doc.output('dataurlnewwindow');

You're generating a PDF from its raw data using Javascript. Why not use a reader like Adobe to render it? That is what is happening when you are clicking the link from the console. You could literally just open the link and it will open as a PDF. I think you are possibly over complicating this task.

I run code from the question in the local machine and take this error:

Not allowed to navigate top frame to data URL: data:application/pdf;filename=generated.pdf;base64,...

JsPDF - Not allowed to navigate top frame to data URL

I tried the suggestion @WeihuiGuo. Unfortunately for me.

I found than Chrome automaticaly open pdf.

https://support.google.com/chrome/answer/6213030?hl=en
https://groups.google.com/a/chromium.org/forum/#!topic/chromium-bugs/z5hA0H6LFws

And not only for the new tab. Not opened on the current page too.
https://sphilee.github.io/jsPDF-CustomFonts-support/

In other browsers this page display correctly.

Such sad news.

Add this is Head tag

Just try this in body..it will work

var doc = new jsPDF({orientation: 'landscape',unit: 'mm',format: 'a4',putOnlyUsedFonts:true}) var burl = doc.output('bloburl'); console.log(burl) var win = window.open(burl) win.print()

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Open jsPDF created pdf in Chrome's new tabwindow - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)