image.png

主要用到了html2canvas,jspdf,原理就是將頁面內(nèi)容轉(zhuǎn)為一個 canvas畦娄，也可以理解為先把頁面轉(zhuǎn)成圖片弊仪，然后再把圖片轉(zhuǎn)成 PDF杖刷。
這里涉及到一個分頁的問題，主要是因為 A4紙 的原因役听，所以pdf的儲存基本都會有一個固定的內(nèi)容高低表窘，代碼中有提到。

移動端截屏保存當(dāng)前圖片
解決html2canvas截圖不全的問題
導(dǎo)出html為PDF內(nèi)容截斷終極解決方案
導(dǎo)出為橫向的PDF
如何添加水印
導(dǎo)出PDF壓縮

image.png

代碼如下：

<template>
  <div>
    <div ref="IMG">
      <ol>
        <li v-for="item in 50" :key="item">
          <h1>頁面轉(zhuǎn)PDF</h1>
        </li>
      </ol>
    </div>
    <div @click="imgDownload" class="download">轉(zhuǎn)PDF</div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {
  data() {
    return {
      imgURL: ""
    };
  },
  methods: {
    // 圖片保存方法
    imgDownload() {
      let _this = this;
      // 獲取需轉(zhuǎn)圖片的范圍元素
      let img = this.$refs["IMG"];
      // 圖片高度
      var w = parseInt(window.getComputedStyle(img).width);
      // 圖片寬度
      var h = parseInt(window.getComputedStyle(img).height);
      //滾輪置頂，避免留白
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      // 利用 html2canvas 下載 canvas
      html2canvas(img).then(function(canvas) {
        //轉(zhuǎn)化為本地的圖片地址
        _this.imgURL = canvas.toDataURL();
        var filename = "導(dǎo)出的文件.pdf";
        //一頁pdf顯示html頁面生成的canvas高度;
        var pageHeight = (w / 592.28) * 841.89;
        //未生成pdf的html頁面高度
        var leftHeight = h;
        //頁面偏移
        var position = 0;
        //a4紙的尺寸[595.28,841.89]孽椰，html頁面生成的canvas在pdf中圖片的寬高
        var imgWidth = 595.28;
        var imgHeight = (592.28 / w) * h;
       // new jsPDF("l", "pt", "a4"); l 表示橫向?qū)С鍪蜇遥籺rue表示壓縮pdf呛梆，否則文件會很大
        var pdf = new jsPDF("p", "pt", "a4");
        //有兩個高度需要區(qū)分，一個是html頁面的實際高度填物，和生成pdf的頁面高度(841.89)
        //當(dāng)內(nèi)容未超過pdf一頁顯示的范圍滞磺，無需分頁
        if (leftHeight < pageHeight) {
          pdf.addImage(_this.imgURL, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          // 分頁
          while (leftHeight > 0) {
            pdf.addImage(
              _this.imgURL,
              "JPEG",
              0,
              position,
              imgWidth,
              imgHeight
            );
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白頁
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        //轉(zhuǎn)pdf下載
        pdf.save(filename);
      });
    }
  }
};
</script>

<style scoped>
h1{
  text-align: left;
}
.download{
  position: fixed;
  width: 100px;
  height: 60px;
  background: blueviolet;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
  right: 0;
  bottom: 50px;
  z-index: 99;
  cursor: pointer;
}
</style>