Search code examples
javascriptgoogle-chromepdfjspdf

Open jsPDF created pdf in Chrome's new tab/window

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.

enter image description here

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/jspdf@1.5.3/dist/jspdf.min.js"></script>
<button id="button">Generate pdf table</button>

Solution

  • 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.