英文:
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 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
%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
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论