javascript - 在 Vuejs 项目中使用 jsPDF 和 html2canvas(没有 webpack)

Question

我正在 Vuejs 项目中开发一项功能，通过单击按钮，用户可以导出包含某些 Vuejs 组件的 pdf。在某种程度上一切都很顺利。我 npm 安装了 2 个包，jsPDF 和 html2canvas (这是一个依赖项)。我将 jsPDF 添加到组件中，如下所示:

import jsPDF from 'jspdf'

点击按钮时触发的函数是:

exportpdf() {
    let pdf = new jsPDF('p', 'px', 'a4')
    pdf.addHTML(this.$refs.userinfo, function() {
         pdf.save('web.pdf')
    })
}

当单击按钮触发该函数时，出现以下错误:

Uncaught (in promise) Error: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js...

所以，我在这里解决了这个问题: Using jsPDF and html2canvas with es6 解释了 jsPDF 需要 html2canvas 位于窗口上。但这在 Vuejs 中是一个巨大的禁忌(请参阅此处的文章): https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

因此，受本文启发，我将 html2canvas 包添加到了 main.js 中:

import html2canvas from 'html2canvas'
...
Vue.use(html2canvas)

现在，当函数被触发时，我得到:

Uncaught (in promise) Provided element is not within a Document

我也尝试过 document.querySelector('#userinfo') - 相同的结果。所以现在我认为自己正式陷入困境 - 非常感谢任何帮助。

Answer 1

html2canvas 不是 Vue 插件，因此您无法对其调用 use(...)。

不过，您可以制作自己的插件。

import html2canvas from 'html2canvas'

let MyPlugin = {
  install(Vue, options) {
    window.html2canvas = html2canvas
  }
}

// ...
Vue.use(MyPlugin)

我不太确定如果另一个库需要它，您为什么反对 window.html2canvas = html2canvas。