html页面直接转为pdf方法

784 阅读1分钟

一、实现思路:

1.使用html2canvas将html页面转为canvas

//安装
npm install html2canvas
//引用
import import html2canvas from 'html2canvas'

2.使用jsPdf将canvas图片转为pdf

//安装
npm install jsPdf
//引用
import jsPdf from 'jspdf'

二、jsPdf方法介绍

const pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);
/**
第一个参数: l:横向  p:纵向

第二个参数:测量单位("pt","mm", "cm", "m", "in" or "px")

第三个参数:可以是下面格式,默认为“a4”

-   a0 - a10
-   b0 - b10
-   c0 - c10
-   dl
-   letter
-   government-letter
-   legal
-   junior-legal
-   ledger
-   tabloid
-   credit-card

默认为“a4”。如果您想使用自己的格式,只需将大小作为数字数组传递,例如[595.28, 841.89];
**/

三、使用示例

printPDF() {
  window.pageYOffset = 0;
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
  const domElement = document.getElementById('app')
  let w = window.screen.availWidth;
  let h = document.body.scrollHeight;
  html2canvas(domElement,
  { 
    allowTaint: true,
    scale:1.5
  }
  )
  .then((canvas) => {
    const imgData = canvas.toDataURL('image/png')
    //jsPdf(orientation,)
    const pdf = new jsPdf('p', 'pt', [w,h])
    pdf.addImage(imgData, 'JPEG', 0, 0, w, h)
    pdf.save('your-filename.pdf')
  })
}

今天就更新到这,有什么想法欢迎一起讨论!!!