html2canvas

• 将HTML转换为canvas，如下，也可以转换为图片，图片格式为base64格式
  html2canvas(el).then((canvas) => {
  img = canvas.toDataURL("image/jpeg", 1.0);
  // Default export is a4 paper, portrait, using millimeters for units
  const doc = new jsPDF();
  doc.addImage(img, "JPEG", 0, 0, 200, 200);
  doc.save("1.pdf");
  });

jspdf

将图片转换为pdf文件，如上述传入base64图片和文件名即可，低版本webpack可以安装低版本的插件包

pdf在线预览

还没解决电子签章的显示问题

// data为后端给的base64格式的pdf
import { data } from "../../tempData";
import pdf from 'vue-pdf'
// 解决部分文字不显示的问题
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
// html
    <pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf>
  data () {
    return {
      src: '',
      numPages: 0,
      page: 1,
      currentPage: 0
    };
  }，
  components: {
    pdf
  },
  mounted () {
    let da = data.fileToBase64
    let datas = 'data:application/pdf;base64,' + da
    this.src = pdf.createLoadingTask({ url: datas, CMapReaderFactory });
    this.src.promise.then(pdf => {
      this.numPages = pdf.numPages;
    });
  },
// 如果是线上的pdf，即http:xxxx.com/xxx.pdf
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      let loadingTask = pdf.createLoadingTask(this.url);
      loadingTask.promise
        .then(pdf => {
          this.numPages = pdf.numPages;
        })
        .catch(err => {
          console.error("pdf 加载失败", err);
        });
    }
  },