纯前端实现导出pdf文件（服务端不参与）

大致查阅了现阶段使用较多的几种方案,，大概有以下几种方式：

一、原生window.print()方法导出pdf
二、jspdf
三、jspdf + html2canvas
四、pdfmake

以上方式可有利弊，使用还需根据需求及pdf文件的复杂程度去综合考虑

方案一：原生window.print()

       推荐两篇博主的文章即可了解到该方法的具体使用
        1、聊一聊浏览器打印 - window.print
        2、前端实现网页打印详解

个人测试效果如下
因为是后台管理系统，导出不想包含左侧菜单栏和顶部区域，所以只对company-detail类名div中的内容进行导出，做了一个临时导出按钮

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

点击打印如下

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

方案二：jspdf

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

• 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。它支持更复杂的页面结构和样式。

    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中基础使用

    3. <script>
    4. import jsPDF from 'jspdf';
    6. export default {
    7. methods: {
    8. generatePDF() {
    9. // 创建一个PDF实例
    10. const pdf = new jsPDF();
    12. // 添加内容
    13. pdf.text('Hello world!', 10, 10);
    15. // 添加图像
    16. pdf.addImage('path/to/image.jpg', 'JPEG', 10, 10, 50, 50);
    18. // 添加矩形
    19. pdf.rect(10, 10, 50, 30);
    21. // 添加圆形
    22. pdf.circle(80, 25, 20);
    24. // 添加文本和链接
    25. pdf.textWithLink('Click me', 10, 10, { url: 'https://example.com' });
    28. // 保存为PDF文件
    29. pdf.save('example.pdf');
    30. },
    31. },
    32. };
    33. script>
    

    还可以配合添加表格
    使用autoTable插件可以方便地添加表格。这个插件需要额外安装

    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图表转了图片
     

    3. <script>
    4. import Chart from 'chart.js';
    5. import jsPDF from 'jspdf';
    7. export default {
    8. data() {
    9. return {
    10. chartData: {
    11. labels: ['Label 1', 'Label 2', 'Label 3'],
    12. datasets: [
    13. {
    14. label: 'Sample Data',
    15. data: [10, 20, 15],
    16. backgroundColor: ['red', 'blue', 'green'],
    17. },
    18. ],
    19. },
    20. };
    21. },
    22. mounted() {
    23. // 使用Chart.js创建柱状图
    24. const ctx = this.$refs.chartCanvas.getContext('2d');
    25. new Chart(ctx, {
    26. type: 'bar',
    27. data: this.chartData,
    28. });
    29. },
    30. methods: {
    31. generatePDF() {
    32. // 获取图表的Base64编码
    33. const chartImage = this.$refs.chartCanvas.toDataURL('image/png');
    35. // 创建一个PDF实例
    36. const pdf = new jsPDF();
    38. // 添加图像
    39. pdf.addImage(chartImage, 'PNG', 10, 10, 80, 50);
    41. // 保存为PDF文件
    42. pdf.save('example_with_chart.pdf');
    43. },
    44. },
    45. };
    46. 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');