个人中心
gpt4 book ai didi

javascript - 在 Chrome 的新标签/窗口中打开 jsPDF 创建的 pdf

转载 作者：行者123 更新时间：2023-11-30 07:19:49 24 4
gpt4 key购买 nike

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

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>

最佳答案

尝试使用 window.open() 代替。以下代码对我有用。您将需要修改窗口/页面大小。

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.

关于javascript - 在 Chrome 的新标签/窗口中打开 jsPDF 创建的 pdf，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54591430/

24 4 0
文章推荐： java - 二维数组(乘法/除法)
文章推荐： java - 如何防止 JNI 覆盖 GetLastError()
文章推荐： java - 从 html 中提取所有可见文本
文章推荐： java - 使用 mvel 检查列表中是否存在元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com