如何在不使用库的情况下从JS对象创建PDF

问题描述 投票:0回答:2

我试图在不使用库的情况下从JS对象创建PDF,我的代码如下:

var downloadLink = document.createElement('a');
var blob = new Blob(["Random text"], {type: 'application/pdf'})
console.log(blob)
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = `${title}.pdf`;

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

这实际上创建了一个要下载的PDF对象,但是此PDF的问题在于它无法被任何pdf阅读器打开,这让我感到自己做错了方法。我的另一种选择是使用window.print,但它需要用户在弹出打印对话框时单击“保存”按钮。关于如何解决这个问题有任何想法吗?

javascript reactjs pdf pdf-generation
2个回答
0
投票

PDF文档由几个部分组成:

  • 一行header标识文件所遵循的PDF规范的版本
  • A body包含组成文件中包含的文档的对象
  • A 交叉引用表包含有关文件中间接对象的信息
  • A trailer给出交叉引用表和某些特殊对象在文件正文中的位置

以下代码是来自Hello World的实际this tutorial PDF文档。 Understanding the PDF File Format from Leon Atherton的完整指南将为您所有的问题提供详细而简单的答案。

[如果您真的想了解它的工作原理,那么还有Adobe的Portable Document Format reference book

创建.txt文件,在您喜欢的编辑器中将其打开,粘贴此代码。然后,将扩展名更改为.pdf。您将看到一个有效的PDF文档。

%PDF-1.4
1 0 obj <</Type /Catalog /Pages 2 0 R>>
endobj
2 0 obj <</Type /Pages /Kids [3 0 R] /Count 1>>
endobj
3 0 obj<</Type /Page /Parent 2 0 R /Resources 4 0 R /MediaBox [0 0 500 800] /Contents 6 0 R>>
endobj
4 0 obj<</Font <</F1 5 0 R>>>>
endobj
5 0 obj<</Type /Font /Subtype /Type1 /BaseFont /Helvetica>>
endobj
6 0 obj
<</Length 44>>
stream
BT /F1 24 Tf 175 720 Td (Hello World!)Tj ET
endstream
endobj
xref
0 7
0000000000 65535 f
0000000009 00000 n
0000000056 00000 n
0000000111 00000 n
0000000212 00000 n
0000000250 00000 n
0000000317 00000 n
trailer <</Size 7/Root 1 0 R>>
startxref
406
%%EOF

0
投票
function genPDF() {
    var doc = new jsPDF();
    doc.text(20,20,'TEST Message!!');
    doc.addPage();
    doc.text(20,20,'TEST Page 2!');
    doc.save('Test.pdf');
}
// decides your pdf layout 

下载PDF

© www.soinside.com 2019 - 2024. All rights reserved.