IT评测·应用市场-qidao123.com

标题: 纯前端实现导出pdf文件（服务端不到场） [打印本页]

---

作者: 涛声依旧在    时间: 2024-7-13 22:59
标题: 纯前端实现导出pdf文件（服务端不到场）
大抵查阅了现阶段利用较多的几种方案,，大概有以下几种方式：
一、原生window.print()方法导出pdf
二、jspdf
三、jspdf + html2canvas
四、pdfmake

方案	长处	缺点
window.print()	1、兼容性最好 2、可以将任意内容导出成 pdf 文档, 甚至黑白改页面上的内容	1、调用方法时部分条件下导出pdf需要用户手动选择
jspdf	1. 调用方法创建 pdf 文件,对于简单的内容可直接利用， 2. 也可以将 dom 节点转换为 pdf 3、生成内容为文本可复制	1、对中文不友好，会有乱码，需要引入字体库办理乱码题目 2、天职dom内容转pdf效果较差, 丢失大量样式设置 3、假如想要导出的pdf文件中包含图片，视觉效果略微含糊 4、pdf分页不利益理
jspdf + html2canvas	1、在jspdf上将生成效果不佳的部分可以转成图片，实用于对样式有要求的场景 2、将乱码部分转为了图片，办理了中文乱码题目 3、没有预览点击即可生存	1、假如内容包含echart图表或者别的图表，该内容需要转图片 2、生成的pdf实际为图片，不支持复制 3、不同浏览器生成可能会有略微差异（页面周边留白部分差异）  4、由于整体效果为图片，导致pdf文件较大（两页2.5MB左右） 5、pdf分页不利益理
pdfmake	1、分页利益理	1、js对象定义文档内容，对数据布局有固定要求  2、图表依旧需要转图片

以上方式可有利弊，利用还需根据需求及pdf文件的复杂水平去综合思量
方案一：原生window.print()
       推荐两篇博主的文章即可了解到该方法的详细利用
        1、聊一聊浏览器打印 - window.print
        2、前端实现网页打印详解
个人测试效果如下
由于是后台管理体系，导出不想包含左侧菜单栏和顶部区域，以是只对company-detail类名div中的内容举行导出，做了一个暂时导出按钮

假设该页面为想要导出的页面

点击打印如下

注：由于测试，代码中并没有去做样式处置惩罚，可以看到效果还不错，加上样式基本可以还原原来的页面，假如是项目需求更多的是文本，表格信息想导出，同时又能担当需要用户手动选择导出为pdf时，这个方案总体最好
方案二：jspdf

• sPDF： 用于在浏览器中生成PDF文件。你可以在Vue项目中利用它，通过引入jsPDF库并编写相应的代码来生成PDF。
  
• 1. npm install jspdf

  复制代码
  1. import jsPDF from 'jspdf';
  3. // 创建一个PDF实例
  4. const pdf = new jsPDF();
  6. // 添加内容
  7. pdf.text('Hello world!', 10, 10);
  9. // 保存为PDF文件
  10. pdf.save('example.pdf');

  复制代码
  
  
  • html2pdf： 这个库可以将HTML内容转换为PDF。它支持更复杂的页面布局和样式。
    
    1. npm install html2pdf.js

    复制代码
    1. import html2pdf from 'html2pdf.js';
    3. // 获取要转换为PDF的DOM元素
    4. const element = document.getElementById('content');
    6. // 转换为PDF
    7. html2pdf(element);

    复制代码
    在vue中基础利用
    
    1. <template>
    2.   <div>
    3.     <button @click="generatePDF">Generate PDF</button>
    4.   </div>
    5. </template>
    7. <script>
    8. import jsPDF from 'jspdf';
    10. export default {
    11.   methods: {
    12.     generatePDF() {
    13.       // 创建一个PDF实例
    14.       const pdf = new jsPDF();
    16.       // 添加内容
    17.       pdf.text('Hello world!', 10, 10);
    19.        // 添加图像
    20.        pdf.addImage('path/to/image.jpg', 'JPEG', 10, 10, 50, 50);
    22.         // 添加矩形
    23.         pdf.rect(10, 10, 50, 30);
    25.         // 添加圆形
    26.         pdf.circle(80, 25, 20);
    28.         // 添加文本和链接
    29.         pdf.textWithLink('Click me', 10, 10, { url: 'https://example.com' });
    32.       // 保存为PDF文件
    33.       pdf.save('example.pdf');
    34.     },
    35.   },
    36. };
    37. </script>

    复制代码
    还可以配合添加表格
    利用autoTable插件可以方便地添加表格。这个插件需要额外安装
    
    1. npm install jspdf-autotable

    复制代码
    1. import 'jspdf-autotable';
    3. // 添加表格
    4. const columns = ['Name', 'Email', 'Phone'];
    5. const data = [
    6.   ['John Doe', 'john@example.com', '555-1234'],
    7.   ['Jane Doe', 'jane@example.com', '555-5678'],
    8. ];
    10. pdf.autoTable(columns, data, { startY: 70 });

    复制代码
    还可以配合echart添加图表，本质是把echart图表转了图片
     
    
    1. <template>
    2.   <div>
    3.     <canvas ref="chartCanvas"></canvas>
    4.     <button @click="generatePDF">Generate PDF with Chart</button>
    5.   </div>
    6. </template>
    8. <script>
    9. import Chart from 'chart.js';
    10. import jsPDF from 'jspdf';
    12. export default {
    13.   data() {
    14.     return {
    15.       chartData: {
    16.         labels: ['Label 1', 'Label 2', 'Label 3'],
    17.         datasets: [
    18.           {
    19.             label: 'Sample Data',
    20.             data: [10, 20, 15],
    21.             backgroundColor: ['red', 'blue', 'green'],
    22.           },
    23.         ],
    24.       },
    25.     };
    26.   },
    27.   mounted() {
    28.     // 使用Chart.js创建柱状图
    29.     const ctx = this.$refs.chartCanvas.getContext('2d');
    30.     new Chart(ctx, {
    31.       type: 'bar',
    32.       data: this.chartData,
    33.     });
    34.   },
    35.   methods: {
    36.     generatePDF() {
    37.       // 获取图表的Base64编码
    38.       const chartImage = this.$refs.chartCanvas.toDataURL('image/png');
    40.       // 创建一个PDF实例
    41.       const pdf = new jsPDF();
    43.       // 添加图像
    44.       pdf.addImage(chartImage, 'PNG', 10, 10, 80, 50);
    46.       // 保存为PDF文件
    47.       pdf.save('example_with_chart.pdf');
    48.     },
    49.   },
    50. };
    51. </script>

    复制代码
    方案三：jspdf + html2canvas
           利用大抵与jspdf相似，不外多叙述
           推荐一份好文推荐：（html2canvas 和 jsPDF）；
           还有一篇提到分页比力详细的文章：JSPDF + html2canvas A4分页截断
    方案四：pdfmake
           推荐文章：pdfmark生成pdf文件并下载
                            巧用pdfmake
    
  • pdfmake 是一个用于在浏览器中生成PDF文档的JavaScript库。它答应你利用简单的JavaScript对象来定义文档的布局和内容，而不是直接利用HTML或其他标志语言。这样可以更轻松地生成复杂的、自定义的PDF文档。
    以下是 pdfmake 的一些关键特点和概念：
    
  • 声明式文档定义： pdfmake 利用声明式的方式定义PDF文档的布局和内容。你通过JavaScript对象来形貌文档的各个部分，如页眉、页脚、段落、表格等。
    
  • 支持丰富的样式： 你可以为文本、段落、表格等元素指定各种样式，包括字体、颜色、大小、对齐方式等。这使得你可以或许创建具有良好格式和外观的PDF文档。
    
  • 支持表格： pdfmake 提供了强大的表格支持，答应你创建具有复杂布局和样式的表格。你可以设置单元格的边框、背景颜色、合并单元格等。
    
  • 支持图片： 你可以将图片添加到PDF文档中，支持从URL加载图片或利用Base64编码的图片数据。
    
  • 支持页面布局： pdfmake 答应你设置页面的大小、方向和边距，以满足不同的打印和布局需求。
    
  • 支持中文和多语言： pdfmake 对于国际化支持相当友好，包括对各种语言和字体的支持。
     
    
    1. // 引入 pdfmake 库
    2. import pdfMake from 'pdfmake/build/pdfmake';
    3. import pdfFonts from 'pdfmake/build/vfs_fonts';
    5. // 注册字体
    6. pdfMake.vfs = pdfFonts.pdfMake.vfs;
    8. // 创建文档定义
    9. const documentDefinition = {
    10.   content: [
    11.     { text: 'Hello, PDFMake!', fontSize: 16, bold: true, alignment: 'center', margin: [0, 0, 0, 10] },
    12.     {
    13.       table: {
    14.         body: [
    15.           ['Name', 'Age', 'Country'],
    16.           ['John Doe', 25, 'USA'],
    17.           ['Jane Doe', 30, 'Canada'],
    18.         ],
    19.       },
    20.     },
    21.     { image: 'data:image/jpeg;base64,...', width: 100, height: 100 },
    22.   ],
    23. };
    25. // 创建PDF文档
    26. const pdfDocGenerator = pdfMake.createPdf(documentDefinition);
    28. // 下载PDF文件
    29. pdfDocGenerator.download('example.pdf');

    复制代码
    
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4