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 @   歇歇吧  阅读(66)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示