如何使用纯JavaScript无第三方库实现JSON转PDF

完全可以实现，不需要引入任何第三方库，所有逻辑基于浏览器原生API就能完成，完美适配离线单HTML页面的打包需求。

浏览器本身内置了完整的PDF渲染生成能力，不需要额外引入PDF处理相关的库，核心是利用原生打印管线配合自定义DOM排版实现导出：

• 先将JSON数据按照需要的排版规则渲染为DOM结构
• 通过打印专属媒体查询控制导出内容的样式、布局，隐藏页面无关元素
• 调用原生打印接口，用户选择「保存为PDF」即可完成文件下载，整个过程全程离线，不依赖任何外部资源。

/**
 * 无依赖JSON导出PDF方法
 * @param {object|array} jsonData 待导出的JSON数据
 * @param {string} fileName 导出文件名
 */
function exportJsonToPdf(jsonData, fileName = 'data-export') {
  // 创建打印专用容器，默认不影响页面正常显示
  const printContainer = document.createElement('div');
  printContainer.id = 'print-export-root';
  printContainer.style.cssText = 'position:fixed;left:-9999px;top:0;';
  document.body.appendChild(printContainer);

  // 插入打印内容与专属样式
  printContainer.innerHTML = `
    <style>
      @page { size: A4; margin: 15mm; }
      @media print {
        body * { visibility: hidden; }
        #print-export-root, #print-export-root * { visibility: visible; }
        #print-export-root {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          font-family: system-ui, -apple-system, sans-serif;
          line-height: 1.5;
        }
        .json-block {
          white-space: pre-wrap;
          font-family: monospace;
          font-size: 12px;
          background: #f5f5f5;
          padding: 12px;
          border-radius: 4px;
        }
        table { width: 100%; border-collapse: collapse; margin: 12px 0; }
        th, td { border: 1px solid #222; padding: 6px 8px; text-align: left; }
        h1 { font-size: 18px; margin-bottom: 16px; }
      }
    </style>
    <h1>数据导出结果</h1>
    <div class="json-block">${JSON.stringify(jsonData, null, 2)}</div>
    <!-- 如果需要自定义排版（比如数组渲染为表格、添加统计信息），直接在这里拼接对应DOM结构即可 -->
  `;

  // 打印完成后清理临时DOM
  const cleanUp = () => {
    document.body.removeChild(printContainer);
    window.removeEventListener('afterprint', cleanUp);
  };
  window.addEventListener('afterprint', cleanUp);

  // 触发打印弹窗
  window.print();
}

// 调用方式：绑定到按钮点击事件即可
// document.querySelector('#export-btn').addEventListener('click', () => {
//   const yourJsonData = { /* 你的业务JSON数据 */ };
//   exportJsonToPdf(yourJsonData);
// });

• 依赖情况：仅使用浏览器原生DOM、打印相关API，webpack打包时不会增加任何额外包体积，打包后的单文件完全离线可用，断网环境下功能正常。
• 兼容性：支持Chrome 63+、Edge 79+、Firefox 58+、Safari 11.1+及以上版本的所有现代桌面浏览器，覆盖绝大多数办公场景。
• 排版灵活：不需要适配复杂的PDF底层格式，只要能通过HTML+CSS实现的排版（表格、图表截图、多列布局等）都可以正常导出为PDF。
• 限制说明：受浏览器安全策略约束，无法静默触发文件保存，必须用户在弹出的打印窗口中手动选择「保存为PDF」并确认存储路径，这个限制是浏览器层面的，没有前端方案可以绕过。

如果需要完全跳过打印弹窗直接生成PDF文件，可以手动拼接符合PDF 1.4规范的二进制数据，生成Blob后通过a标签触发下载。但这种方案需要自行处理文本编码、坐标计算、字体嵌入、分页逻辑，开发成本极高，仅适合纯文本无复杂格式的极简场景，常规业务开发不推荐使用。

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