• • 
    
• ​ ​output​ ​
• 
  
• ​ ​在新的窗口显示​ ​
• ​ ​在本页面插入​ ​
• • ​ ​文件名称设置​ ​
• 
  
  • 
    

使用jspdf生成的pdf文档，网上一般都是如何下载到本地中，使用save()方法，但是现在并不想下载，而是直接显示在页面中。

output

查找了​ ​官方文档​ ​​，发现可以使用​ ​output​ ​方法：

output(type, options) → {string|window|ArrayBuffer|Blob|jsPDF|null|undefined}

源码: jspdf.js, line 3010

生成PDF文档。

若类型参数未定义，则输出是以字符串作为返回结果的PDF的原始体。

参数：

在新的窗口显示

使用的是​ ​dataurlnewwindow​ ​，这会打开一个新的窗口，

但是无法设置文件名称，点击下载也是没有反应，代码如下

doc.output('dataurlnewwindow', orderNo + ".pdf");

在本页面插入

还可以显示在当前页面

使用​ ​iframe​ ​或者​ ​embed​ ​标签

iframe

在html中设置元素：

<iframe id="iframe123" frameborder="0" ></iframe>

js：

document.getElementById("iframe123").src = doc.output('datauristring');//在iframe中显示

embed

html:

<div id="iframe123"> </div>

js:

let data = doc.output('datauristring', orderNo + ".pdf");
    var objbuilder = '';
    objbuilder += ('<embed width=\'100%\' height=\'100%\'  src="');
    objbuilder += (data);
    objbuilder += ('" type="application/pdf" title="' + orderNo + '.pdf"  />');
    document.getElementById("iframe123").innerHTML = objbuilder

现在点击下载会有反应，但是文件名称无法设置

文件名称设置

最后看到一种方法，在生成PDF文档时，隐藏浏览器默认的pdf工具栏，然后使用​ ​save​ ​方法生成pdf文档。代码如下：

let data = doc.output('datauristring', orderNo + ".pdf");
    var objbuilder = '';
    objbuilder += ('<embed width=\'100%\' height=\'100%\'  src="');
    objbuilder += (data +'#toolbar=0);
    objbuilder += ('" type="application/pdf" title="' + orderNo + '.pdf"  />');
    document.getElementById("iframe123").innerHTML = objbuilder

在生成的base64代码后面添加​ ​#toolbar=0​ ​