不依赖第三方库实现React/JavaScript中JSON转PDF并下载的方案咨询

先排查你现有代码的问题 #

你之前的代码逻辑完全错误：请求的是返回JSON数据的接口，却设置Content-Type: application/pdf，接口不会返回PDF格式内容，导致下载的是无效文件，自然无法正常工作。

可行方案（无第三方库） #

方案1：利用浏览器打印功能转PDF #

将JSON格式化后生成纯文本，通过浏览器打印对话框让用户保存为PDF，这是最简便的原生方案：

// 格式化JSON为目标文本格式
function formatJsonToText(jsonData) {
  let text = "Employees\n\n";
  jsonData.employees.forEach(emp => {
    text += `FirstName: ${emp.firstName}  LastName: ${emp.lastName}\n\n`;
  });
  return text;
}

// 你的目标JSON数据
const targetJson = {"employees":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]};

// 生成格式化文本
const formattedContent = formatJsonToText(targetJson);

// 创建隐藏容器存放内容
const printWrapper = document.createElement('div');
printWrapper.style.position = 'fixed';
printWrapper.style.top = '-9999px';
printWrapper.style.left = '-9999px';
printWrapper.style.whiteSpace = 'pre'; // 保留换行与空格
printWrapper.textContent = formattedContent;
document.body.appendChild(printWrapper);

// 触发打印，用户可选择"保存为PDF"
window.print();

// 打印完成后清理容器
document.body.removeChild(printWrapper);

方案2：手动构建简单PDF文件并下载 #

PDF是二进制格式，需遵循其基础规范。以下代码可生成包含格式化文本的基础PDF文件并直接下载：

// 格式化JSON为目标文本格式
function formatJsonToText(jsonData) {
  let text = "Employees\n\n";
  jsonData.employees.forEach(emp => {
    text += `FirstName: ${emp.firstName}  LastName: ${emp.lastName}\n\n`;
  });
  return text;
}

// 将文本转为符合PDF规范的Blob
function textToPdfBlob(text) {
  // 处理PDF特殊字符转义
  const escapedText = text.replace(/\n/g, '\\n').replace(/\(/g, '\\(').replace(/\)/g, '\\)');
  // 基础PDF结构模板
  const pdfContent = `%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 /MediaBox [0 0 612 792] /Contents 4 0 R /Resources << /Font << /F1 5 0 R >> >> >>
endobj
4 0 obj
<< /Length ${escapedText.length + 100} >>
stream
BT
/F1 12 Tf
100 700 Td
(${escapedText}) Tj
ET
endstream
endobj
5 0 obj
<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>
endobj
xref
0 6
0000000000 65535 f 
0000000009 00000 n 
0000000079 00000 n 
0000000173 00000 n 
0000000323 00000 n 
0000000523 00000 n 
trailer
<< /Size 6 /Root 1 0 R >>
startxref
625
%%EOF`;

  return new Blob([pdfContent], { type: 'application/pdf' });
}

// 执行转换与下载
const targetJson = {"employees":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]};

const formattedText = formatJsonToText(targetJson);
const pdfBlob = textToPdfBlob(formattedText);

// 创建下载链接
const downloadUrl = window.URL.createObjectURL(pdfBlob);
const downloadLink = document.createElement('a');
downloadLink.href = downloadUrl;
downloadLink.download = 'employees.pdf';
document.body.appendChild(downloadLink);
downloadLink.click();

// 清理资源
document.body.removeChild(downloadLink);
window.URL.revokeObjectURL(downloadUrl);

注意：方案2的PDF为基础版本，仅支持短文本内容，若需处理长文本分页、复杂格式，建议使用专业PDF库，但符合你"无第三方库"的需求。

内容的提问来源于stack exchange，提问作者melikhan