在新选项卡中创建和打开 PDF答案

【问题标题】：Create and open PDF in new tab在新选项卡中创建和打开 PDF
【发布时间】：2019-10-27 07:40:34
【问题描述】：

在我的应用程序中，我有一个使用 html2canvas 和 jsPDF 创建 pdf 的按钮。我希望在新选项卡中打开新下载的 pdf。我不知道如何打开新下载的文件。

这甚至可能吗？

这是我的代码。

print() {
        const fileName = String(new Date().valueOf());
        const element: HTMLElement = document.querySelector('.print-area');
        const regionCanvas = element.getBoundingClientRect();
        html2canvas(element, { scale: 3 }).then(async canvas => {
            const pdf = new jsPDF('p', 'mm', 'a4');
            pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 3, 0, 205, (205 / regionCanvas.width) * regionCanvas.height);
            await pdf.save(fileName, { returnPromise: true });

            const a = document.createElement('a');
            a.href = fileName;
            // this points to non existing file
            document.body.appendChild(a);
        });
    }

【问题讨论】：

标签： javascript angular jspdf html2canvas

【解决方案1】：

我找到了一种下载和打开文件的方法。您基本上必须调用两个函数：

pdf.save(fileName);
window.open(pdf.output('bloburl', { filename: fileName }), '_blank');

所以最后的代码是这样的：

print() {
        const fileName = String(new Date().valueOf());
        const element: HTMLElement = document.querySelector('.print-area');
        const regionCanvas = element.getBoundingClientRect();
        html2canvas(element, { scale: 3 }).then(async canvas => {
            const pdf = new jsPDF('p', 'mm', 'a4');
            pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 3, 0, 205, (205 / regionCanvas.width) * regionCanvas.height);
            await pdf.save(fileName, { returnPromise: true });
            window.open(pdf.output('bloburl', { filename: fileName }), '_blank');
        });
    }

【讨论】：