在 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。