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

Question

我有一个带有永久按钮的网站，供人们下载pdf文档（我的简历）。永久性的意思是，它在网站的导航栏上随时显示，供人们下载。

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

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

• 添加新的组件MyCV到App.vue
• 用v-show="false"隐藏组件，因为我不想让它被看到
• 点击下载按钮，触发自定义事件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代码的方法，只是为了确保我首先对整个定制事件都做了正确的处理。

提前感谢！

Answer 1

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

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

Answer 2

我最终试图重新表述这个问题，并得到了这个问题和答案：如何在父事件上调用子组件上的函数

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