将 JSON 转换为 PDF 文件并使用 React / JavaScript 下载文件。

huangapple go评论127阅读模式
英文:

converting json to pdf file and download file using react / javascript

问题

我想将JSON数据转换为PDF文件。您能指导我一个有帮助的方向吗?

例如,我想将以下JSON数据转换为PDF:

注意:我想在不使用任何库的情况下完成。

{
  "employees":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
  ]
}

我想首先创建PDF文件,然后下载我创建的PDF文件。

我尝试了以下方法:

fetch('https://catfact.ninja/fact/', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/pdf',
  },
})
  .then((response) => response.blob())
  .then((blob) => {
    // 创建用于下载的 Blob 链接
    const url = window.URL.createObjectURL(new Blob([blob]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `FileName.pdf`);

    // 将链接添加到页面
    document.body.appendChild(link);

    // 启动下载
    link.click();

    // 清理并移除链接
    link.parentNode.removeChild(link);
  });

但这个文档不起作用。

注意:我希望在不使用任何库的情况下完成。

英文:

I want to convert json data into a pdf file. Can you please point me in a helpful direction?
For example, I'd like to convert this json;

NOTE: I want to do it without using any library.

{"employees":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}
Employees

FirstName: John  LastName  :Doe

FirstName: Anna LastName  :Smith

FirstName: Peter LastName  :Jones

I want to create pdf first and then download the pdf file I created.

I try:

fetch('https://catfact.ninja/fact/', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/pdf',
      },
    })
      .then((response) => response.blob())
      .then((blob) => {
        // Create blob link to download
        const url = window.URL.createObjectURL(
          new Blob([blob]),
        );
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute(
          'download',
          `FileName.pdf`,
        );

        // Append to html link element page
        document.body.appendChild(link);

        // Start download
        link.click();

        // Clean up and remove the link
        link.parentNode.removeChild(link);
      });

but this document does not work.

NOTE: I want to do it without using any library.

答案1

得分: 0

为了将 JSON 转换为 PDF 而不依赖于任何外部库,你需要将文本重新组织成 PDF,类似以下内容:

%PDF-1.1
%âãÏÓ
1 0 obj<< /Type /Catalog /Pages 2 0 R>> endobj
2 0 obj<< /Type /Pages /Kids [3 0 R] /Count 1 /MediaBox [0 0 594 792]>> endobj
3 0 obj<< /Type /Page /Parent 2 0 R /Resources<< /Font<< /F1<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica>>>>/Contents 4 0 R>> endobj
4 0 obj<< /Length 302 >> stream
BT /F1 18 Tf 036 740 Td (Employees) Tj ET
BT /F1 16 Tf 036 720 Td (FirstName: John) Tj ET
BT /F1 16 Tf 236 720 Td (LastName: Doe) Tj ET
BT /F1 16 Tf 036 700 Td (FirstName: Anna) Tj ET
BT /F1 16 Tf 236 700 Td (LastName: Smith) Tj ET
BT /F1 16 Tf 036 680 Td (FirstName: Peter) Tj ET
BT /F1 16 Tf 236 680 Td (LastName: Jones) Tj ET
BT /F1 16 Tf 036 660 Td (FirstName: ) Tj ET
BT /F1 16 Tf 236 660 Td (LastName: ) Tj ET
endstream endobj
xref
0 5
0000000000 65535 f
0000000021 00000 n
0000000065 00000 n
0000000139 00000 n
0000000269 00000 n
trailer<< /Root 1 0 R /Size 5>> startxref
752
%%EOF

这个任务的难点在于如何正确计算和确定 /Length 302752,如果搞错了,文件可能会被拒绝或报告错误。

英文:

In order to convert json into PDF without any dependency than text string edits, you need to restructure the text as a PDF something like this
将 JSON 转换为 PDF 文件并使用 React / JavaScript 下载文件。

%PDF-1.1
%&#226;&#227;&#207;&#211;
1 0 obj&lt;&lt;/Type/Catalog/Pages 2 0 R&gt;&gt;endobj
2 0 obj&lt;&lt;/Type/Pages/Kids [3 0 R]/Count 1/MediaBox [0 0 594 792]&gt;&gt;endobj
3 0 obj&lt;&lt;/Type/Page/Parent 2 0 R/Resources&lt;&lt;/Font&lt;&lt;/F1&lt;&lt;/Type/Font/Subtype/Type1/BaseFont/Helvetica&gt;&gt;&gt;&gt;&gt;&gt;/Contents 4 0 R&gt;&gt;endobj
4 0 obj&lt;&lt;/Length 302
&gt;&gt;
stream

BT /F1 18 Tf 036 740 Td (Employees) Tj ET
BT /F1 16 Tf 036 720 Td (FirstName: John) Tj ET
BT /F1 16 Tf 236 720 Td (LastName: Doe) Tj ET
BT /F1 16 Tf 036 700 Td (FirstName: Anna) Tj ET
BT /F1 16 Tf 236 700 Td (LastName: Smith) Tj ET
BT /F1 16 Tf 036 680 Td (FirstName: Peter) Tj ET
BT /F1 16 Tf 236 680 Td (LastName: Jones) Tj ET
BT /F1 16 Tf 036 660 Td (FirstName: ) Tj ET
BT /F1 16 Tf 236 660 Td (LastName: ) Tj ET

endstream 
endobj
xref
0 5 
0000000000 65535 f
0000000021 00000 n
0000000065 00000 n
0000000139 00000 n
0000000269 00000 n
trailer&lt;&lt;/Root 1 0 R /Size 5&gt;&gt;
startxref
752
%%EOF

the hard part is how to count and decide on /Length 302 and 752 get them wrong and the file is likely rejected or complains of a fault.

huangapple
  • 本文由 发表于 2023年3月3日 21:23:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/75627625.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定