前端html转pdf并下载（html2canvas 和 jsPDF）

最新推荐文章于 2025-01-15 02:41:09 发布

守望黑玫瑰

最新推荐文章于 2025-01-15 02:41:09 发布

阅读量574

点赞数

分类专栏： vue 上传下载文件

本文链接：https://blog.csdn.net/weixin_45048913/article/details/114525289

版权

vue 同时被 2 个专栏收录

24 篇文章

订阅专栏

上传下载文件

4 篇文章

订阅专栏

这篇博客介绍了如何利用html2canvas和jsPDF库在浏览器端将HTML内容转换为高质量的PDF文件。首先，通过html2canvas获取DOM结构并渲染到canvas，然后使用jsPDF将canvas内容转换为PDF。博客详细阐述了实现过程，包括安装插件、定义转换方法、全局引入以及在页面中调用。示例代码展示了如何将特定ID的DOM元素转换为PDF并下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html2canvas

html2canvas在浏览器上对整个或者局部页面进行“截图”，也就是通过遍历页面的DOM结构，搜集所有元素信息及样式，渲染出canvas image。

由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便。

jsPDF

jsPDF库可以用于浏览器端生成PDF

html2canvas+ jsPDF 实现html转pdf并下载

1、下载插件模块

npm install html2canvas jspdf --save

2、定义功能实现方法

创建htmlToPdf.js文件，代码如下：

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function (id) {
      var title = this.htmlTitle

      var pdfDom = document.querySelector(`#${id}`)
      var width = pdfDom.offsetWidth; //dom宽
      var height = pdfDom.offsetHeight; //dom高
      var scale = 2; //放大倍数
      var opts = {
        dpi: window.devicePixelRatio * 2,
        scale: scale,//添加的scale参数
        width: width,
        height: height,
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        // allowTaint: true
      };
      var canvas = document.createElement("canvas")//创建一个canvas节点
      canvas.width = width * 2;
      canvas.height = height * 2;
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      var context = canvas.getContext("2d")

      context.scale(2, 2) // 增强图片清晰度

      html2Canvas(pdfDom, opts).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        //a4纸的尺寸[595.28,841.89]，html 页面生成的 canvas 在pdf中图片的宽高
        let imgWidth = 590
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)//0-1清晰度
        let PDF = new JsPDF('', 'pt', 'a4')// 下载尺寸 a4 纸 比例
         //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
         //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
        // PDF.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            //避免添加空白页
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }

        PDF.save(title + '.pdf')
      })
    }
  }
}

3、全局引入

import htmlToPdf from '@/utils/htmlToPdf'
Vue.use(htmlToPdf)

4、在页面使用

点击时调用绑定在Vue原型上的getPdf方法，传入id即可

//html
 <div id="pdfDom">
  <div >显示的内容</div>
</div>
<el-button type="primary" size="small" @click="getPdf('#pdfDom')">点击下载</el-button>
 
//js
export default {
  data () {
      return {
      htmlTitle: '页面导出PDF文件名'
      }
  }
 }```