如何在 Vue JS 中使用 html2canvas？答案

【问题标题】：How to use html2canvas with Vue JS?如何在 Vue JS 中使用 html2canvas？
【发布时间】：2018-08-29 15:03:29
【问题描述】：

我遇到的第一个障碍是 Vue 中没有 document.getElementById 的简写，所以我实现了一个 function like this one。我面临的第二个障碍是恕我直言，html2canvas docs 在处理没有<!DOCTYPE html> 和<body> 的情况时非常有限。

这是我的.vuefile 中的标记摘要：

<template>
   <div>
      <md-layout>
         <div id="capture" class='m1 '>
            // more markup...
         </div>
      </md-layout>
   </div>
</template>

这就是我尝试实现捕获功能的方式：

//Vue equivalent for document.getElementById
showCaptureRef() {
   console.log(this.$refs.capture);
},
// Screen capture function
downloadVisualReport () {
  let vc = this
  alert("Descargando reporte visual")
  html2canvas(vc.showCaptureRef).then(canvas => {
      vc.document.body.appendChild(canvas)
  }).catch((error) => {
    console.log("Erorr descargando reporte visual")
    alert("Error descargando el reporte visual")
  });
},

【问题讨论】：

“我面临的第一个障碍是没有 document.getElementByIdin Vue 的简写”当然有。将ref="foo" 放在元素上，然后通过组件中的this.$refs.foo 访问它。
你最终解决了这个问题吗？
@claudekennilol 是的，等一下，我会写答案

标签： javascript vue.js html2canvas

【解决方案1】：

我想通了，我有两个错误：

首先我有id='capture' 而不是ref="capture"

第二，这行vc.document.body.appendChild(canvas)，需要改成document.body.appendChild(canvas)

这是将画布下载为图像的函数的最终代码：

downloadVisualReport () {
  let vc = this
  let filename = 'Reporte de ' + vc.campaign.name + '.png'; 
  html2canvas(vc.showCaptureRef()).then(canvas => {  
      vc.saveAs(canvas.toDataURL(), filename);      
  }).catch((error) => {
    alert("Error descargando el reporte visual")
  });
},

【讨论】：

【解决方案2】：

为未来的读者。试试这个vue-html2canvas mixin。

<template>
  <div>
    <!-- SOURCE -->
    <div ref="printMe">
      <h1>Print me!</h1>
    </div>
    <!-- OUTPUT -->
    <img :src="output">
  </div>
<teplate>

<script>
export default {
  data() {
    return {
      output: null
    }
  },
  methods: {
    print() {
      const el = this.$refs.printMe;
      // add option type to get the image version
      // if not provided the promise will return 
      // the canvas.
      const options = {
        type: 'dataURL'
      }
      this.output = await this.$html2canvas(el, options);
    }
  }
}
</script>

【讨论】：

我现在正在尝试使用这个库，但遇到了await is a reserved word 的问题。所以我决定把print()async print()做成async print()，虽然没有错误，但是图片src留空。
您是否正确使用它？ @AnthonySette

【解决方案3】：

https://www.npmjs.com/package/vue-html2canvas
  
  <template>
      <div>
        <!-- SOURCE -->
        <div ref="printMe">
          <h1>Print me!</h1>
        </div>
        <!-- OUTPUT -->
        <img :src="output">
      </div>
    <teplate>
    
    <script>
    export default {
      data() {
        return {
          output: null
        }
      },
      methods: {
        print() {
          const el = this.$refs.printMe;
          // add option type to get the image version
          // if not provided the promise will return 
          // the canvas.
          const options = {
            type: 'dataURL'
          };
          (async () => {
              this.output = await this.$html2canvas(el, options);
          })()
        }
      }
    }
    </script>

【讨论】：