Question

Chrome pdf viewer button is not working with jsPDF

我正在使用jsPDF生成pdf，并且工作正常。 Chrome浏览器pdf按钮不起作用。我尝试了许多不同的方法，但没有成功。

在这里，我想分享示例代码：

download() {
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');

// Save the 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();
//doc.save('Test.pdf');

}

通过此代码，新标签页打开，但chrome浏览器下载按钮不起作用。

还有其他方法可以做到这一点。

Answer 1

我找到了解决方案。我们只需要简单地使用此代码，Chrome pdf查看器的下载按钮就可以正常工作。

window.open（doc.output（'bloburl'），'_blank'）;

Answer 2

尽管window.open可以正常工作，但是出于安全原因，默认情况下，新的chrome版本会阻止弹出式窗口，因此我需要其他解决方案。

我个人还会尝试使用iframe解决方案。我在下面编写对我有用的解决方案：

HTML代码（用于屏幕上的完整iframe）：

 <iframe id="main-iframe" style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 2; border: none;"></iframe>

JavaScript代码：

 document.getElementById('main-iframe').setAttribute('src', doc.output('bloburl'));

Chrome浏览器pdf按钮不适用于jsPDF

2 个答案: