关于pdf导出:domToPdf

6次阅读

共计 1454 个字符,预计需要花费 4 分钟才能阅读完成。

import html2canvas from ‘html2canvas’
import JsPDF from ‘jspdf’
export const printOut = (name, id) => {
let shareContent = document.getElementById(id) // 须要截图的包裹的(原生的)DOM 对象
let width = shareContent.clientWidth // 获取 dom 宽度
let height = shareContent.clientHeight // 获取 dom 高度
let canvas = document.createElement(‘canvas’) // 创立一个 canvas 节点
let scale = 1 // 定义任意放大倍数 反对小数
canvas.width = width scale // 定义 canvas 宽度 缩放
canvas.height = height scale // 定义 canvas 高度 缩放
canvas.style.width = shareContent.clientWidth * scale + ‘px’
canvas.style.height = shareContent.clientHeight * scale + ‘px’
canvas.getContext(‘2d’).scale(scale, scale) // 获取 context, 设置 scale

let opts = {

scale: scale, // 增加的 scale 参数
canvas: canvas, // 自定义 canvas
logging: true, // 日志开关,便于查看 html2canvas 的外部执行流程
width: width, // dom 原始宽度
height: height,
useCORS: true //【重要】开启跨域配置

}

html2canvas(shareContent, opts).then(() => {

var contentWidth = canvas.width
var contentHeight = canvas.height
// 一页 pdf 显示 html 页面生成的 canvas 高度;
var pageHeight = (contentWidth / 592.28) * 841.89
// 未生成 pdf 的 html 页面高度
var leftHeight = contentHeight
// 页面偏移
var position = 0
// a4 纸的尺寸[595.28,841.89],html 页面生成的 canvas 在 pdf 中图片的宽高
var imgWidth = 595.28
var imgHeight = (592.28 / contentWidth) * contentHeight
var pageData = canvas.toDataURL('image/jpeg', 1.0)
console.log(pageData, 'pageDatapageData')
var PDF = new JsPDF('','pt','a4')
if (leftHeight < pageHeight) {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(name + '.pdf') // 这里是导出的文件名

})
}

正文完
 0