Question

如何在Chrome 71中使用JavaScript链接data:application/pdf;filename=generated.pdf;base64;DATA打开？
不幸的是，来自控制台的链接已成功打开，但未从代码中打开。
出于安全原因，该代码段无效。仅用于代码演示。
我读了一些类似的问题，但没有找到答案。

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

实际上很简单，不要使事情复杂化。

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后立即打开新窗口，否则Chrome会阻止弹出窗口。此解决方案效果不佳，因为从datauri到blob的不必要转换）

Answer 2

此代码对我有用

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

Answer 3

改为尝试window.open()。以下代码对我有用。不过，您需要修改窗口/页面的大小。

let dataSrc = pdf.output('datauristring');
let w= window.open("", "MsgWindow");
w.document.write("<html><head><title>jsPDF</title></head><body><embed src=" + 
    dataSrc + " width='100%' height='100%'></embed></body></html>");

更新：

没有意识到jsPDF带有内置方法pdf.output('dataurlnewwindow');，该方法使用iframe，

pdf.output('dataurlnewwindow')的缺点是，它以PDF文件名datauristring打开了一个新的选项卡/窗口，并且下载按钮不起作用，而window.open(pdf.output('bloburl'))似乎与下载按钮。

好的，可以这样重命名pdf文件：

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

更新2：

为避免页面放大时页面被剪断，one can force the zoom level back to 100% and set the html2canvas scale accordingly.

Answer 4

您正在使用Javascript从原始数据生成PDF。为什么不使用Adobe之类的阅读器进行渲染呢？当您从控制台单击链接时，就是这种情况。您实际上可以打开链接，该链接将以PDF格式打开。我认为您可能使该任务复杂化了。

Answer 5

我在本地计算机上从问题中运行代码并出现以下错误：

不允许将顶部框架导航到数据URL：data：application / pdf; filename = generation.pdf; base64，...

JsPDF - Not allowed to navigate top frame to data URL

我尝试了@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/

在其他浏览器中，此页面正确显示。

这样的不幸消息。

在Chrome的新标签页/窗口中，打开jsPDF创建pdf文件

5 个答案: