vue中实现将页面或者div内容导出为pdf格式

最新推荐文章于 2025-03-06 10:10:24 发布

淡漠爱清凉

最新推荐文章于 2025-03-06 10:10:24 发布

阅读量2.9k

点赞数

文章标签： javascript html5 vue.js npm

本文链接：https://blog.youkuaiyun.com/Mr_115/article/details/132470615

版权

本文介绍了如何在Vue项目中将单页面或div内容转换为PDF并进行下载。主要步骤包括：安装相关库，创建htmlToPdf.js，设置div标签并指定id，声明htmlTitle变量用于定义PDF文件名，最后在页面上添加按钮触发下载。

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

将Vue单页面转成pdf并下载

步骤1：下载对应的库

npm install html2canvas;

npm install jspdf --save

步骤2：创建一个htmlToPdf.js的js文件, 然后在main.js中全局引用一下，编写如下代码：

// htmlToPdf.js
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle  //DPF标题
        html2Canvas(document.querySelector('#pdfDom'), {
          allowTaint: true,
          taintTest: false,
          useCORS: true,
          y:72, // 对Y轴进行裁切
          // width:1200,
          // height:5000,
          dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
          scale: 4 //按比例增加分辨率 
        }).then(function (canvas) {
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          let pageHeight =