vue2+html2canvas+jspdf 导出网页

` async handlePreview() {
const pdf = await this.exportToPdf()
// 使用浏览器预览 PDF-安全策略有缺陷
const pdfDataURI = pdf.output('datauristring')
window.open(pdfDataURI, '_blank','location=no');
},
async handleDown() {
const pdf = await this.exportToPdf()
// 下载 PDF
console.log('pdf', pdf)
pdf.save('申请单.pdf')
},
exportToPdf() {
const element = document.getElementsByClassName('dialog-box')[0] // 你想要导出为 PDF 的元素
console.log('element', element)
const options = {
scale: 1, // 提高分辨率
useCORS: true, // 允许跨域请求
}
return new Promise((resolve, reject) => {
html2canvas(element, options).then((canvas) => {
const contentWidth = canvas.width
const contentHeight = canvas.height

      // 一页 PDF 显示 HTML 页面生成的 canvas 高度;
      const pageHeight = (contentWidth / 592.28) * 841.89
      // 未生成 PDF 的 HTML 页面高度
      let leftHeight = contentHeight
      // 页面偏移
      let position = 0
      // a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
      const imgWidth = 595.28
      const imgHeight = (592.28 / contentWidth) * contentHeight

      const pageData = canvas.toDataURL('image/jpeg', 1.0)

      const pdf = new jsPDF('', 'pt', 'a4')
      // 设置边距
      // pdf.setMargins(15, 15, 15, 15)

      // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
      // 当内容未超过pdf一页显示的范围,无需分页
      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()
          }
        }
      }
      // return pdf
      resolve(pdf)
    })
  }).catch((error) => {
    console.log('error', error)
    // reject(error)
  })
},`
posted @ 2024-09-03 15:18  歇歇吧  阅读(45)  评论(0编辑  收藏  举报