前端完成页面下载为pdf

最新推荐文章于 2024-07-12 11:18:10 发布

Mr.WeI197

最新推荐文章于 2024-07-12 11:18:10 发布

阅读量304

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_55814597/article/details/127444526

版权

整体代码是这样，但是里面的有些数据需要调整

 async downloadPdF() {
    // 三个参数，第一个方向，第二个单位，第三个尺寸格式
    var doc = new jsPDF();
    let tempImg = new Image('', 'px', 'a4');
    const nodeList = document.querySelector("#echartPdf").childNodes

    for (let i = 0; i <= nodeList.length; i++) {
      console.log(i, nodeList[i]);
      new html2canvas(nodeList[i], {
        useCORS: true,
        allowTaint: true // 这两个属性都是图片跨域相关属性
      }).then(canvas => {
        let height = 270
        const canvasHeight = Number(canvas.style.height.split('px')[0])

        if (canvasHeight <= 450) {
          height = 65
        } else if (canvasHeight <= 1000) {
          height = 130
        } else if (canvasHeight <= 1500) {
          height = 195
        }
        console.log(99, canvasHeight);
        tempImg.src = canvas.toDataURL(); // 导出图片
        // this.downloadLocMethod(tempImg.src, "海报");
        // 左边距  上边距   宽200 高100
        //  if(i===0){
        //   doc.addImage(tempImg.src, 'JPEG', 5, 10, 200, 270)
        //  }else{
        //   doc.addPage(tempImg.src, 'JPEG', 5, 10, 200, 270);

        //  }
        doc.addImage(tempImg.src, 'JPEG', 10, 10, 195, height)
        doc.addPage()
        if (i === nodeList.length - 1) {
          let targetPage = doc.internal.getNumberOfPages();
          doc.deletePage(targetPage); // 删除最后一页
          console.log(2, '下载');
          doc.save('趋势图.pdf');
        }

      });
    }

  }