html2pdf不能实现在一页输出长图，与产品需求不符，故使用

  const handleDownload = () => {
    let element = document.getElementById('elementToPrint');
    if (element) {
      let width = element.offsetWidth / 4;
      let height = element.offsetHeight / 4;
      let limit = 14400;
      if (height > limit) {
        let contentScale = limit / height;
        height = limit;
        width *= contentScale;
      html2canvas(element, {
        scale: 2,
        useCORS: true,
        allowTaint: false,
        ignoreElements: (element: { id: string }) => {
          if (element.id === 'ignoreBtnElement') return true;
          return false;
      }).then(canvas => {
        let context: any = canvas.getContext('2d');
        let orientation;
        if (context) {
          context.mozImageSmoothingEnabled = false;
          context.webkitImageSmoothingEnabled = false;
          context.msImageSmoothingEnabled = false;
          context.imageSmoothingEnabled = false;
        let pageData = canvas.toDataURL('image/jpg', 1.0);
        let img = new Image();
        img.src = pageData;
        img.onload = function () {
          img.width /= 2;
          img.height /= 2;
          img.style.transform = 'scale(0.5)';
          let pdf;
          orientation = width > height ? 'l' : 'p'
          // eslint-disable-next-line
          pdf = new jsPDF(orientation , 'mm', [
            width,
            height
          ]);
          pdf.addImage(
            pageData,
            'jpeg',
            width,
            height
          pdf.save(`${originTitle}-${name}-${reportDate.replace(/-/g, '.')}.pdf`);
      });
				
html2pdf(html转换pdf)，
html2canvas+jspdf+pdfmake+jquery
页面直接html生成pdf文件，避免了，过多人下载pdf，消耗服务器资源的一个解决方案。如果并发量大的情况下，很好的解决了服务器的压力。
自己研究了好长时间终于搞定了
				
文中内容是在 Vue 项目中使用 html2canvas和 jspdf 插件实现将页面的内容生成 PDF，并记录在使用过程中遇到的一些问题和解决方案。文中将会贴出很多参考文章，如果各位有需要，可以前往原文章查阅。
html2canvas + jspdf介绍使用方法分页分割问题html2canvas生成图片只有一半其他参考文章
1、html2canvas
该插件允许我们直接在浏览器上对网页或其部分进行“截图”操作，但是屏幕截图基于 DOM，这一点很关键。这就会导致截图的结果，很可能不是自己想要的。.
最近在项目中，有一个导出pdf功能，需要纯前端来实现，调研了多种pdf导出方式，最终决定使用html2canvas+jsPDF来实现需求。
本文就简单介绍一下html2canvas+jsPDF导出pdf的实现，网上大部分实现导出pdf都是以分页为主的，本文还将附上不分页导出pdf的实现方法。(只附js代码)
html2canvas+jsPDF导出pdf原理：通过html2canvas将遍历页面元素，并渲染生成canvas，然后将canvas图片格式添加到jsPDF实例，生成pdf。
				
由于项目需要前端导出文档，一开始是准备导出word,后来发现导出word比较麻烦，并且前端基本都是由echarts和dataTable组成的，不好导出，最后改为导出为pdf,采用的是jsPDF和html2canvas
一、先引入html2canvas和jsPDF
      downPdf.onclick = function() {
          html2canvas(document.body, {
              onrendered:function(canvas) {
                  var contentWidth = canvas.width;
                  var contentHeight = canvas.height;
                  //一页pdf显示html页面生成的canvas高度;
                  var pageHeight = contentWidth / 592.28 * 841.89;
                  //未生成pdf的html页面高度
                  var leftHeight = contentHeight;
                  //pdf页面偏移
                  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);
                  var pdf = new jsPDF('', 'pt', 'a4');
                  //有两个高度需要区分，一个是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();
                  pdf.save('content.pdf');
    [removed]
				
代码在最后，现在说下原理，jspdf分页有个比较不要的地方就内容过长的时候虽然会虽然能做到分页，但是会把内容给截断，解决思路是给每个可能会被截断元素加上类，然后动态的计算该元素的位置是否在下一页和上一页之间，如果在的话就添加一个空白元素把这个空白元素给挤下去，这样就能实现了，看看对比效果把。
这是没有判断元素位置之前的，可以看到出现了截断
再看看判断了元素位置之后的，在分页的地方都不会出现断裂了，完全解决的问题
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import html2Canvas from "html2canvas";
import jsPdf from "jspdf";
@Component({ name.
				
前端生成PDF是现代Web开发领域中的一个热门话题。HTML2Canvas和jsPDF是在前端生成PDF方面非常有用的工具。HTML2Canvas是一个用JavaScript编写的开源库，它可以将网页或部分网页快速和轻松地转换为图像文件。jsPDF是一个用于生成PDF文件的JavaScript库，可以让开发人员在前端使用JavaScript生成PDF。
使用HTML2Canvas和jsPDF进行前端生成PDF时，我们经常会遇到一些问题。其中最常见的问题之一是分页时图片和文字被截断。这种情况的发生原因是HTML2Canvas在渲染页面时无法检测到分页的边缘。因此，如果您使用HTML2Canvas截取长页面来生成PDF，您可能会发现页面文本和图片被裁剪。
为了解决这个问题，我们可以采取一些方法。首先，我们可以在过程中让页面加载足够的时间。这可能会使页面更容易渲染，从而解决图像和文字被截断的问题。其次，我们可以使用额外的CSS样式来控制HTML2Canvas的绘图。可以使用CSS设置宽度和高度，或将元素的样式设置为page-break-before:always和page-break-after:always等。
总之，HTML2Canvas和jsPDF是非常有用的工具，可以让我们在前端生成PDF。但是在使用这些工具时，我们需要面对一些问题，其中最常见的问题是生成PDF时图像和文字被截断。我们可以使用一些技巧来解决这个问题，包括延长页面加载时间和使用额外的CSS样式。