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

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

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

问题

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

例如，我想将以下JSON数据转换为PDF：

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

  1. {
  2.   "employees":[
  3.     {"firstName":"John", "lastName":"Doe"}, 
  4.     {"firstName":"Anna", "lastName":"Smith"},
  5.     {"firstName":"Peter", "lastName":"Jones"}
  6.   ]
  7. }

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

我尝试了以下方法：

  1. fetch('https://catfact.ninja/fact/', {
  2.   method: 'GET',
  3.   headers: {
  4.     'Content-Type': 'application/pdf',
  5.   },
  6. })
  7.   .then((response) => response.blob())
  8.   .then((blob) => {
  9.     // 创建用于下载的 Blob 链接
  10.     const url = window.URL.createObjectURL(new Blob([blob]));
  11.     const link = document.createElement('a');
  12.     link.href = url;
  13.     link.setAttribute('download', `FileName.pdf`);
  15.     // 将链接添加到页面
  16.     document.body.appendChild(link);
  18.     // 启动下载
  19.     link.click();
  21.     // 清理并移除链接
  22.     link.parentNode.removeChild(link);
  23.   });

但这个文档不起作用。

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

英文:

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.

  1. {"employees":[
  2.     {"firstName":"John", "lastName":"Doe"}, 
  3.     {"firstName":"Anna", "lastName":"Smith"},
  4.     {"firstName":"Peter", "lastName":"Jones"}
  5. ]}
  1. Employees
  3. FirstName: John  LastName  :Doe
  5. FirstName: Anna LastName  :Smith
  7. FirstName: Peter LastName  :Jones

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

I try:

  1. fetch('https://catfact.ninja/fact/', {
  2.       method: 'GET',
  3.       headers: {
  4.         'Content-Type': 'application/pdf',
  5.       },
  6.     })
  7.       .then((response) => response.blob())
  8.       .then((blob) => {
  9.         // Create blob link to download
  10.         const url = window.URL.createObjectURL(
  11.           new Blob([blob]),
  12.         );
  13.         const link = document.createElement('a');
  14.         link.href = url;
  15.         link.setAttribute(
  16.           'download',
  17.           `FileName.pdf`,
  18.         );
  20.         // Append to html link element page
  21.         document.body.appendChild(link);
  23.         // Start download
  24.         link.click();
  26.         // Clean up and remove the link
  27.         link.parentNode.removeChild(link);
  28.       });

but this document does not work.

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

答案1

得分: 0

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

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

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

英文:

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 下载文件。

  1. %PDF-1.1
  2. %&#226;&#227;&#207;&#211;
  3. 1 0 obj&lt;&lt;/Type/Catalog/Pages 2 0 R&gt;&gt;endobj
  4. 2 0 obj&lt;&lt;/Type/Pages/Kids [3 0 R]/Count 1/MediaBox [0 0 594 792]&gt;&gt;endobj
  5. 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
  6. 4 0 obj&lt;&lt;/Length 302
  7. &gt;&gt;
  8. stream
  10. BT /F1 18 Tf 036 740 Td (Employees) Tj ET
  11. BT /F1 16 Tf 036 720 Td (FirstName: John) Tj ET
  12. BT /F1 16 Tf 236 720 Td (LastName: Doe) Tj ET
  13. BT /F1 16 Tf 036 700 Td (FirstName: Anna) Tj ET
  14. BT /F1 16 Tf 236 700 Td (LastName: Smith) Tj ET
  15. BT /F1 16 Tf 036 680 Td (FirstName: Peter) Tj ET
  16. BT /F1 16 Tf 236 680 Td (LastName: Jones) Tj ET
  17. BT /F1 16 Tf 036 660 Td (FirstName: ) Tj ET
  18. BT /F1 16 Tf 236 660 Td (LastName: ) Tj ET
  20. endstream 
  21. endobj
  22. xref
  23. 0 5 
  24. 0000000000 65535 f
  25. 0000000021 00000 n
  26. 0000000065 00000 n
  27. 0000000139 00000 n
  28. 0000000269 00000 n
  29. trailer&lt;&lt;/Root 1 0 R /Size 5&gt;&gt;
  30. startxref
  31. 752
  32. %%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
  • html
  • javascript
  • react-hooks
  • reactjs
  • typescript
匿名

发表评论

匿名网友

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

确定