js实现将文本转PDF格式并下载到本地

枫叶&情缘

已于 2023-08-30 13:41:29 修改

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： javascript pdf 开发语言

于 2023-08-16 14:18:23 首次发布

本文链接：https://blog.csdn.net/weixin_45791806/article/details/132318314

版权

JavaScript 专栏收录该内容

69 篇文章 2 订阅

订阅专栏

本文介绍了如何在HTML项目中通过引入jspdf.umd.min.js和FileSaver.js库，配合SimHei.ttf字体文件，实现将文本内容转换为PDF，并通过点击事件调用convertTextToPDF函数，生成并保存PDF文档。

摘要由CSDN通过智能技术生成

html里面需要引入jspdf.umd.min.js和FileSaver.js
jspdf.umd.min.js：https://www.npmjs.com/package/jspdf
FileSaver.js：https://download.csdn.net/download/weixin_45791806/87272893?spm=1001.2014.3001.5503
同时项目的根部目录也需要引入SimHei.ttf：https://www.baidu.com/s?wd=SimHei.ttf（百度）
代码使用：

 $('.surplus-btn').click(function () {
     // 调用函数并传入文本内容和页面尺寸
     const textContent = '文本内容';
     convertTextToPDF(textContent);
 });
  /**PDF**/
 convertTextToPDF: function (text) {
      // 创建一个新的 jsPDF 实例
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      // 设置字体为 
      doc.addFont('/SimHei.ttf', 'simhei', 'normal');
      doc.setFont("simhei");
      // 设置字体大小
      doc.setFontSize(12);
      // 将文本分割成适应页面大小的多个段落
      const paragraphs = doc.splitTextToSize(text, doc.internal.pageSize.getWidth() - 20);
   // 将段落逐个添加到 PDF 中
   let y = 10;
   paragraphs.forEach((paragraph) => {
       // 检查当前页面是否还有足够的空间容纳段落
       if (y + 10 > doc.internal.pageSize.getHeight()) {
           // 如果没有足够空间，添加新页面
           doc.addPage();
           y = 10; // 重置 y 坐标
       }
       doc.text(paragraph, 10, y);
       y += 10;
   });
   // 保存 PDF 文件
   doc.save('文档标题' + ".pdf");
},