html2canvas jspdf 渲染 vue 组件答案

【问题标题】：html2canvas jspdf render vue componenthtml2canvas jspdf 渲染 vue 组件
【发布时间】：2020-03-25 04:43:13
【问题描述】：

我正在尝试将 vue 组件的模板渲染到画布，然后将其添加到 html，但我所拥有的只是空白图像。有可能吗？

我尝试将 document.body 渲染为图像，它非常完美（不使用组件，直接来自父级）。然后我尝试将 this.$refs.content 设置为要捕获的元素，甚至从 console.log 获得正确的输出，但我只得到白色的空白图片。现在我决定将这个逻辑包装在一个组件中。要捕获的所需 div 位于页面底部，您需要滚动很多才能到达它。也许有问题？任何建议都非常感谢。

这里是组件模板：

<template>
  <div>
    <button @click="download" class="btn">PDF Download</button>
    <div class="A4" ref="content">
      <div class="col s12">
        <h5 style="text-align: center">
          <strong>Load Confirmation & Rate Agreement</strong>
        </h5>
      </div>
      <div class="col s12">
        <div class="col s2">
          <img style="width: 110px" :src="logo" alt="logo" />
        </div>
        <div class="col s4">
          <h6>
            <strong>{{ companyName.toUpperCase() }}</strong>
          </h6>
          <p style="margin-top: 0px;">We make it move!</p>
        </div>
      </div>
    </div>
  </div>
</template>

这是组件的脚本部分：

<script>
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

export default {
  data: () => ({
    logo: '',
    companyName: ''
  }),
  methods: {
    download() {
      let self = this;
      console.log(self);
      return new Promise((resolve, reject) => {
        let windowHeight = self.$refs.content.offsetHeight;
        let windowWidth = self.$refs.content.offsetWidth;
        let pdfName = 'results';
        var doc = new jsPDF('p', 'mm', 'a4');
        var canvasElement = document.createElement('canvas');
        canvasElement.width = windowWidth;
        canvasElement.height = windowHeight;
        html2canvas(self.$refs.content, {
          canvas: canvasElement,
          width: windowWidth,
          height: windowHeight
        })
          .then(function(canvas) {
            let ratio = canvas.width / canvas.height;
            let PDFwidth = doc.internal.pageSize.getWidth();
            let PDFheight = PDFwidth / ratio;
            const img = canvas.toDataURL('image/jpeg', 1);
            doc.addImage(img, 'JPEG', 0, 0, PDFwidth, PDFheight);
            doc.save('sample.pdf');
            resolve();
          })
          .catch(err => {
            reject(err);
          });
      });
    }
  },
  async mounted() {
    this.logo = (await this.$store.dispatch('fetchLogo')).logo;
    this.companyName = await this.$store.dispatch('fetchCompanyName');
  }
};
</script>

和风格：

<style scoped>
.A4 {
  border: 1px solid black;
  background-color: lightgoldenrodyellow;
  height: 297mm;
  width: 210mm;
  padding: 5mm;
}
</style>

【问题讨论】：

标签： vue.js jspdf html2canvas

【解决方案1】：

我安装了 vue-html2canvas。得到了正确的画布，没有任何额外的选项：

let el = this.$refs.print.$el;
this.output = (await html2canvas(el)).toDataURL();

$el 在调用 ref 时必须是 vue-component

【讨论】：