使用未在路由器视图中呈现的 Vue.js 组件制作 pdf答案

【问题标题】：Make a pdf out of a Vue.js component that is not rendered in the router-view使用未在路由器视图中呈现的 Vue.js 组件制作 pdf
【发布时间】：2020-09-03 11:26:09
【问题描述】：

我有一个带有永久按钮的网站，供人们下载 pdf 文档（我的简历）。永久意味着它始终存在于网站的导航栏上，供人们下载。

但我想控制 pdf 中包含的内容，所以我决定创建一个新组件，命名为 MyCV，并使用 json 文档动态构建最终将提取为 pdf 的 html。

所以我这样处理这个问题：

将新组件MyCV 添加到App.vue
使用v-show="false" 隐藏组件，因为我不希望它被看到
点击Download按钮，触发自定义事件exportpdf，该事件将被MyCV组件拾取并触发实际导出为pdf的功能。

理论上听起来非常简单和合乎逻辑，但在实践中它不起作用（或者我可能对 Vue.js 非常生疏）。

代码：

App.vue

<template>
...
   <v-btn small v-on:click="emitExtractPDFEvent()">Download CV</v-btn>

...

   <MyCV
       v-show="false"
       v-on:extractpdf="printToPDF()"
   ></MyCV>
</template>

<script>

      emitExtractPDFEvent: function() {
          this.$emit('extractpdf');
      },
      printToPDF: function() {
        console.log('MAGIC! I'm ready to export the pdf!!!');
      }
</script>

这绝对不是由 html2canvas 或 jspdf 引起的，因为我剥离了任何 html2canvas/jspdf 代码的方法，只是为了确保我首先对整个自定义事件进行了正确处理。

提前致谢！

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

我最终试图重新表述这个问题并得到这个问题和答案：How to call function on child component on parent events

我放弃了整个自定义事件解决方案，只是在触发 click 事件时从父组件中触发了子组件中存在的 print to pdf 方法。

【讨论】：

【解决方案2】：

您只能生成页面上显示的内容的 PDF（可打印）。实际发生的是 chrome 将视图转换为可以打印的图像，这可以通过使用 window.print() 函数来完成，但在内容显示在屏幕上之前它不会起作用。

为了从 json 数据生成 PDF 并且不向用户显示，我会建议您检查一些第三方库，例如 jsreport

【讨论】：