纯前端实现导出pdf文件(服务端不参与)

这篇具有很好参考价值的文章主要介绍了纯前端实现导出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中的内容进行导出,做了一个临时导出按钮

前端怎样将当前jsp导出为pdf,pdf

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

前端怎样将当前jsp导出为pdf,pdf

点击打印如下
前端怎样将当前jsp导出为pdf,pdf

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

方案二:jspdf

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

  • npm install jspdf
    import jsPDF from 'jspdf';
    
    // 创建一个PDF实例
    const pdf = new jsPDF();
    
    // 添加内容
    pdf.text('Hello world!', 10, 10);
    
    // 保存为PDF文件
    pdf.save('example.pdf');
    
    • html2pdf: 这个库可以将HTML内容转换为PDF。它支持更复杂的页面结构和样式。

      npm install html2pdf.js
      import html2pdf from 'html2pdf.js';
      
      // 获取要转换为PDF的DOM元素
      const element = document.getElementById('content');
      
      // 转换为PDF
      html2pdf(element);
      

      在vue中基础使用

      <template>
        <div>
          <button @click="generatePDF">Generate PDF</button>
        </div>
      </template>
      
      <script>
      import jsPDF from 'jspdf';
      
      export default {
        methods: {
          generatePDF() {
            // 创建一个PDF实例
            const pdf = new jsPDF();
      
            // 添加内容
            pdf.text('Hello world!', 10, 10);
      
             // 添加图像
             pdf.addImage('path/to/image.jpg', 'JPEG', 10, 10, 50, 50);
      
              // 添加矩形
              pdf.rect(10, 10, 50, 30);
      
              // 添加圆形
              pdf.circle(80, 25, 20);
      
              // 添加文本和链接
              pdf.textWithLink('Click me', 10, 10, { url: 'https://example.com' });
      
      
            // 保存为PDF文件
            pdf.save('example.pdf');
          },
        },
      };
      </script>

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

      npm install jspdf-autotable
      
      import 'jspdf-autotable';
      
      // 添加表格
      const columns = ['Name', 'Email', 'Phone'];
      const data = [
        ['John Doe', 'john@example.com', '555-1234'],
        ['Jane Doe', 'jane@example.com', '555-5678'],
      ];
      
      pdf.autoTable(columns, data, { startY: 70 });
      

      还可以配合echart添加图表,本质是把echart图表转了图片
       

      <template>
        <div>
          <canvas ref="chartCanvas"></canvas>
          <button @click="generatePDF">Generate PDF with Chart</button>
        </div>
      </template>
      
      <script>
      import Chart from 'chart.js';
      import jsPDF from 'jspdf';
      
      export default {
        data() {
          return {
            chartData: {
              labels: ['Label 1', 'Label 2', 'Label 3'],
              datasets: [
                {
                  label: 'Sample Data',
                  data: [10, 20, 15],
                  backgroundColor: ['red', 'blue', 'green'],
                },
              ],
            },
          };
        },
        mounted() {
          // 使用Chart.js创建柱状图
          const ctx = this.$refs.chartCanvas.getContext('2d');
          new Chart(ctx, {
            type: 'bar',
            data: this.chartData,
          });
        },
        methods: {
          generatePDF() {
            // 获取图表的Base64编码
            const chartImage = this.$refs.chartCanvas.toDataURL('image/png');
      
            // 创建一个PDF实例
            const pdf = new jsPDF();
      
            // 添加图像
            pdf.addImage(chartImage, 'PNG', 10, 10, 80, 50);
      
            // 保存为PDF文件
            pdf.save('example_with_chart.pdf');
          },
        },
      };
      </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 对于国际化支持相当友好,包括对各种语言和字体的支持。
       文章来源地址https://www.toymoban.com/news/detail-844200.html

      // 引入 pdfmake 库
      import pdfMake from 'pdfmake/build/pdfmake';
      import pdfFonts from 'pdfmake/build/vfs_fonts';
      
      // 注册字体
      pdfMake.vfs = pdfFonts.pdfMake.vfs;
      
      // 创建文档定义
      const documentDefinition = {
        content: [
          { text: 'Hello, PDFMake!', fontSize: 16, bold: true, alignment: 'center', margin: [0, 0, 0, 10] },
          {
            table: {
              body: [
                ['Name', 'Age', 'Country'],
                ['John Doe', 25, 'USA'],
                ['Jane Doe', 30, 'Canada'],
              ],
            },
          },
          { image: 'data:image/jpeg;base64,...', width: 100, height: 100 },
        ],
      };
      
      // 创建PDF文档
      const pdfDocGenerator = pdfMake.createPdf(documentDefinition);
      
      // 下载PDF文件
      pdfDocGenerator.download('example.pdf');
      

到了这里,关于纯前端实现导出pdf文件(服务端不参与)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)

    一、背景介绍 ​ 当我们在不想改变后端代码的同时想是纯html页面导出PDF,那么(html2canvas+jspdf)就是无疑最好的选择,导出时它不占用我们服务器的资源,而是由用户本地自行执行js文件下载PDF,不占用我们系统的带宽,所以这无非是最好的选择方式。 二、疑问 1、为什么要

    2024年01月23日
    浏览(60)
  • 前端vue基于html2canva jspdf 实现前端页面加水印 并导出页面PDF

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月03日
    浏览(48)
  • html2canvas和jspdf实现html导出pdf文件

    实现原理 先使用html2canvas对页面进行截图,再使用jspdf将截图生成pdf文件 html2canvas:通过纯JS对浏览器页面进行截图 jspdf:一个基于 HTML5 的客户端解决方案,用于在客户端 JavaScript 中生成 pdf文件 的库 安装html2canvas和pdf 截图源码 1. 截长图不分页 2. 截图分页 导出pdf源码 函数调

    2024年02月12日
    浏览(59)
  • 前端JS实现导出xlsx文件

    需求背景: 需要导出表格的数据,由于后端不提供导出接口,所以由前端通过JSON数据导出实现。 使用的插件: js-export-excel 安装: npm install js-export-excel 使用: 亲测有用,只要前端能拿到的是表格全量数据,就能直接导出表格所有数据。但如果是后端分页查询的表格,前端

    2024年02月04日
    浏览(59)
  • 前端导出PDF(纯前端功能)

    例如:需要导出PDF格式 提示:问题出现在滚动条加错地方 首先: npm install html2canvas npm install jspdf 第二:新建一个htmlToPdf.js文件存放 // 导出页面为PDF格式 import html2Canvas from \\\'./html2canvas\\\' import JsPDF from \\\'./jsPdf.debug\\\' export default{   name:\\\'wwutils\\\',   toolExportPdf(fileName) {     let isCompele

    2024年02月16日
    浏览(49)
  • 前端实现pdf,图片,word文件预览

    需求:实现一个在线预览pdf、excel、word、图片等文件的功能。 介绍:支持pdf、xlsx、docx、jpg、png、jpeg。 以下使用Vue3代码实现所有功能,建议以下的预览文件标签可以在外层包裹一层弹窗。 iframe标签能够将另一个HTML页面嵌入到当前页面中,我们的图片也能够使用iframe标签来

    2024年02月11日
    浏览(56)
  • vue 纯前端预览pdf,纯前端实现pdf加水印下载文件也带水印,防止pdf下载

      原理:主要是利用pdfh5这个插件来完成的   使用方法:   1.页面需要有一个容器例子:div id=\\\"demo\\\"/div   2.下载pdfh5插件 npm install pdfh5   (注意:webpack5之后不会下载polyfill 需要手动下载 所以引入pdfh5的时候会报错)   解决方案:下载 node-polyfill-webpack-plugin npm install node-polyfill-

    2024年04月15日
    浏览(68)
  • 手机怎样新建PDF文件?

    怎样新建PDF文件? 今天小编就给大家推荐一个 免费 新建PDF文件的 移动端 PDF工具,使用移动端安卓和IOS设备。 工具“金闪PDF编辑器” 新建PDF文件:新建PDF文件的方式有三种 (1)扫描纸质版文件新建为PDF文件 (2)提取相册图片新建为PDF文件 (3)新建PDF空白页 下面我们就

    2024年02月08日
    浏览(33)
  • vue 项目前端导出pdf(纯前端操作)

    npm install html2canvas npm install jspdf

    2024年02月02日
    浏览(43)
  • 前端实现流文件下载、导出功能解决方案

    1、封装下载方法(可以通过挂载在vue实例上成为全局函数) 2、调用下载方法 ·1、处理响应拦截器返回的数据,将文件名暴露暴露出去 2、封装下载方法 3、调用下载方法 问题一:后端返回的数据无法解析 在请求函数中添加响应类型以及响应头 问题二、后端返回的文件名经

    2024年04月23日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包