将页面导出为PDF

环境及插件配置:(理论上vue2应该也可以使用,没有试验过)

javascript 复制代码
"vue": "^3.2.36",
"webpack": "^5.94.0",
"webpack-cli": "^5.1.4",
"html2canvas": "^1.4.1",
"jspdf": "^2.5.2",

必须安装 html2canvas 与 jspdf

该方法中用到了一个判断数据类型的小方法

javascript 复制代码
 * 判断数据类型
 * @param {any} value 
 * @returns {String}
 * 返回数据为:
 * "[object Number]","[object String]","[object Boolean]","[object Date]","[object RegExp]"
 * "[object Object]","[object Array]","[object Function]","[object Null]","[object Undefined]"
 */

function getDataType(value) {
  return Object.prototype.toString.call(value)
}

将html页面导出为PDF

javascript 复制代码
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

function getDataType(value) {
  return Object.prototype.toString.call(value)
}

/**
 * 将页面导出为PDF
 * @param {Object} 参数为{},具体属性参数参照详细解释
 * @param {html} htmlDom 要导出的DOM片段
 * @param {String} exportTitle 导出文件的文件名
 * @param {String} watermark 水印 需要水印时传入即可 非必填
 * @param {String} color 水印颜色 - 默认 opacity 为0.3
 * @param {String} bgColor 导出的PDF背景色 - 默认为白色
 */

function exportToPDF({ htmlDom, exportTitle = "导出文件", watermark, color = '184,184,184, 0.3', bgColor = "#fff" }) {
  const A4Width = 197;
  const A4Height = 297;
  html2canvas(htmlDom,
    {
      scale: 2,
      useCORS: true,
      dpi: 300,
      backgroundColor: bgColor
    }
  ).then(canvas => {
    const pdf = new jsPDF('p', 'mm', 'a4')
    const ctx = canvas.getContext('2d')
    // 水印
    if (watermark) {
      const contentWidth = canvas.width
      const contentHeight = canvas.height
      console.log(watermark)
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.rotate((20 * Math.PI) / 180);
      ctx.font = '20px Microsoft Yahei';
      ctx.fillStyle = color;
      for (let i = contentWidth * -1; i < contentWidth; i += 400) {
        for (let j = contentHeight * -1; j < contentHeight; j += 400) {
          // 填充文字,x 间距, y 间距
          ctx.fillText(watermark, i, j);
        }
      }
    }
    const imgHeight = Math.floor(A4Height * canvas.width / A4Width)
    let rendereHeight = 0
    while (rendereHeight < canvas.height) {
      const page = document.createElement('canvas')
      page.width = canvas.width
      page.height = Math.min(imgHeight, canvas.height - rendereHeight)
      page.getContext('2d').putImageData(ctx.getImageData(0, rendereHeight, canvas.width, Math.min(imgHeight, canvas.height - rendereHeight)), 0, 0)
      pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'PNG', 10, 10, A4Width, Math.min(A4Height, A4Width * page.height / page.width))
      rendereHeight += imgHeight
      if (rendereHeight < canvas.height) {
        pdf.addPage()
      }
    }
    pdf.save(exportTitle + '.pdf')
  })
}

export {
  exportToPDF
}
相关推荐
持久的棒棒君40 分钟前
npm安装electron下载太慢,导致报错
前端·electron·npm
渔舟唱晚@2 小时前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流
crary,记忆3 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz3 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou03 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干4 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大4 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu4 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端4 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846954 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea