如何在新窗口中使用 jspdf 打开生成的 pdf答案

【问题标题】：How to open generated pdf using jspdf in new window如何在新窗口中使用 jspdf 打开生成的 pdf
【发布时间】：2013-07-18 08:51:09
【问题描述】：

我正在使用 jspdf 来生成一个 pdf 文件。每件事都运行良好。但是怎么打开生成的 pdf 在新标签页或新窗口中。

我正在使用

doc.output('datauri');

在同一个选项卡中打开 pdf。

【问题讨论】：

标签： javascript jspdf

【解决方案1】：

根据来源，您可以为 output() 使用“dataurlnewwindow”参数：

doc.output('dataurlnewwindow');

github 中的源码： https://github.com/MrRio/jsPDF/blob/master/jspdf.js#L914

所有可能的情况：

doc.output('save', 'filename.pdf'); //Try to save PDF as a file (not works on ie before 10, and some mobile devices)
doc.output('datauristring');        //returns the data uri string
doc.output('datauri');              //opens the data uri in current window
doc.output('dataurlnewwindow');     //opens the data uri in new window

【讨论】：

当我使用 doc.output('save', 'filename.pdf');我收到此错误：未捕获的 ReferenceError：未定义 saveAs jspdf.js:975，我使用的是 chrome 版本 29.0.1547.66 m。
@YaBasha 你还需要 FileSaver.js。
doc.output('dataurlnewwindow'); 返回一个空白页。在调用它之前我需要做些什么吗？
在 Chrome 60 中，doc.output('dataurlnewwindow'); 创建一个带有 URL 的新选项卡，但您必须按 Enter 键才能加载 pdf。使用 @ilter 中的 blob 选项效果更好。
doc.output('dataurlnewwindow');返回一个空白页我是否需要在此@devgirl 之前调用任何其他方法（你有相同的解决方案吗）

【解决方案2】：

我必须使用它来直接加载 PDF。使用 doc.output('dataurlnewwindow'); 会为我生成一个丑陋的 iframe。 Mac/Chrome。

  var string = doc.output('datauristring');
  var x = window.open();
  x.document.open();
  x.document.location=string;

【讨论】：

无需使用 iframe 只需使用 doc.output('dataurlnewwindow', {})
@TheBackBencher doc.output('dataurlnewwindow', {}) 总是让浏览器崩溃 (Firefox)。
同 'doc.output('dataurlnewwindow'); - 使浏览器崩溃 (Firefox)
@FullDecent 4 年后，但现在它打开了一个空白页面。

【解决方案3】：

这个解决方案对我有用

window.open(doc.output('bloburl'))

【讨论】：

window.open(pdf.output('bloburl'), '_blank');在 Chrome 中为我工作

【解决方案4】：

或者... 您可以使用 Blob 来实现这一点。

喜欢：

pdf.addHTML($('#content'), y, x, options, function () {
    var blob = pdf.output("blob");
    window.open(URL.createObjectURL(blob));
});

该代码允许您在浏览器中创建一个 Blob 对象并将其显示在新选项卡中。

【讨论】：

有点旧的线程但是如何在 addHTML 之外生成 pdf 文件？似乎“blob”是一个局部变量，所以 alert(blob) 显示“未定义”。有什么线索吗？
@Gene9y 它更老，但您可以使用 localStorage 或 indexeddb 来存储 blob。

【解决方案5】：

在 jspdf.js 中搜索这个：

if(type == 'datauri') {
    document.location.href ='data:application/pdf;base64,' + Base64.encode(buffer);
}

添加：

if(type == 'datauriNew') {   
    window.open('data:application/pdf;base64,' + Base64.encode(buffer));
}

将此选项称为“datauriNew”Saludos ;)

【讨论】：

在 iOS 8 中不起作用。我在这里找到了 @atroy 的解决方案：stackoverflow.com/a/21629499/2978727
使用最新版本的'dataurlnewwindow'。
@Majestic12 这会在地址栏中为我打开一个带有 uri 字符串的空白页面...我必须按 Enter。

【解决方案6】：

使用 javascript，您可以使用以下代码将生成的 pdf 发送到新窗口。

var string = doc.output('datauristring');

var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"

var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();

【讨论】：

JsPdf 也有这方面的功能。您可以调用以下方法。 doc.output('dataurlnewwindow');
下载按钮似乎不适用于此方法。

【解决方案7】：

我就是这样处理的。

window.open(doc.output('bloburl'), '_blank');

【讨论】：

@NorCalKnockOut 您是否打开了任何类型的广告或弹出窗口拦截器？
ublock源广告拦截器拦截了chrome上的请求，页面需要禁用

【解决方案8】：

此代码将帮助您在具有所需标题的新标签中打开生成的 pdf

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

【讨论】：

【解决方案9】：

这对我有用！！！

当您指定窗口功能时，它将在新窗口中打开

就像：

window.open(url,"_blank","top=100,left=200,width=1000,height=500");

【讨论】：

【解决方案10】：

Javascript 代码

// IE doesn't allow using a blob object directly as link href
// instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  window.navigator.msSaveOrOpenBlob(doc.output("blob"), "Name.pdf");
} else {

  // For other browsers:
  // Create a link pointing to the ObjectURL containing the blob.
  doc.autoPrint();
  window.open(
    URL.createObjectURL(doc.output("blob")),
    "_blank",
    "height=650,width=500,scrollbars=yes,location=yes"
  );

  // For Firefox it is necessary to delay revoking the ObjectURL
  setTimeout(() => {    
    window.URL.revokeObjectURL(doc.output("bloburl"));
  }, 100);
}

【讨论】：

您必须禁用广告拦截器才能正常工作

【解决方案11】：

第一步：包含文件和插件

../jspdf.plugin.addimage.js

第二步：构建 PDF 内容 var doc = new jsPDF();

doc.setFontSize(12);
doc.text(35, 25, "Welcome to JsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 386, 386);

第三步：在新窗口中显示图片

doc.output('dataurlnewwindow');

Stepv IV：保存数据

var output = doc.output();
return btoa( output);

【讨论】：

doc.output("dataurlnewwindow"); 打开但不呈现 PDF；但是您可以保存并打印它！

【解决方案12】：

第 1 步
关闭添加块

第 2 步
添加

window.open(doc.output('bloburl'), '_blank');

或者试试

doc.output('dataurlnewwindow')

【讨论】：

【解决方案13】：

一般可以download it, show, or get a blob string:

const pdfActions = {
    save: () => doc.save(filename),
    getBlob: () => {
      const blob = doc.output('datauristring');
      console.log(blob)
      return blob
    },
    show: () => doc.output('dataurlnewwindow')
  }

【讨论】：

【解决方案14】：

Javascript 代码：添加到最后一行

$("#pdf_preview").attr("src", pdf.output('datauristring'));

HTML 代码：插入正文

<head>
</head>
<body>
<H1>Testing</h1>
<iframe id="pdf_preview" type="application/pdf" src="" width="800" height="400"></iframe>
</body>
</html>

在 iframe 内的同一窗口内预览以及其他内容。

【讨论】：

【解决方案15】：

此外，重要的是要记住输出方法还有其他值，测试所有这些值以选择适合您情况的理想值可能会很有趣。

https://artskydj.github.io/jsPDF/docs/jsPDF.html#output

一次测试一行：

doc.output('arraybuffer');
doc.output('blob');
doc.output('bloburi');
doc.output('bloburl');
doc.output('datauristring');
doc.output('dataurlstring');
doc.output('datauri');
doc.output('dataurl');
doc.output('dataurlnewwindow');
doc.output('pdfobjectnewwindow');
doc.output('pdfjsnewwindow');

【讨论】：