打开 jsPDF 在 Chrome 的新 tab/window 中创建的 pdf

Question

如何在 Chrome 71 中用 javascript link data:application/pdf;filename=generated.pdf;base64;DATA 打开？
Link 从控制台成功打开，但不是从代码 - 不幸的是。
出于安全原因，该代码段不起作用。仅供代码演示。
我看了一些类似的问题，但没有找到答案。

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>

Answer 1

您正在使用 Javascript 从原始数据生成 PDF。为什么不用像 Adobe 这样的 reader 来渲染呢？这就是您从控制台单击 link 时发生的情况。您可以直接打开 link，它将以 PDF 格式打开。我认为你可能把这个任务复杂化了。

Answer 2

试试 window.open()。以下代码对我有用。您将需要修改 window/page 大小。

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,

Answer 3

我运行代码来自本地机器中的问题并出现此错误：

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

我尝试了@WeihuiGuo 的建议。不幸的是我。

我发现 Chrome 自动打开 pdf。

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

而且不仅仅是新标签。当前页面也没有打开。
https://sphilee.github.io/jsPDF-CustomFonts-support/

In other browsers this page display correctly.

好悲伤的消息。

Answer 4

其实很简单，不要把事情复杂化..

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

或更冗长且效率较低的版本：

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

（你需要在onclick之后立即打开新的window，否则Chrome会阻止弹出窗口。这个解决方案不是很好，因为有一个不必要的从datauri到blob的转换）

Answer 5

这段代码对我有用

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

打开 jsPDF 在 Chrome 的新 tab/window 中创建的 pdf

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

javascript

pdf

google-chrome

jspdf