javascript - 如何在vuejs中将vue文件下载为pdf文件？

Question

我有一个如下所示的 vue，当我单击 main_component 中的一个按钮时，我想将其下载为 PDF。请帮助我找到解决方法。

下载.vue

<template>
  <div>
    This file includes a set of instructions to finish this process
  </div>
</template>

主文件.vue

<template>
  <div>
    *Button to download the above file as PDF*
  </div>
</template>

Answer 1

您可以使用 Javascript window.print document 方法并将您的download.vue 组件导入ma​​in_file.vue 组件，然后使用$refs 传递download.vue 组件的innerHTML。

方法一:无需任何插件另存为PDF。

这是一个代码片段，它会为您提供一个打印对话框，您可以在其中打印或保存 PDF。

ma​​in_file.vue

<template>
  <div>
    <button @click="printDownload">Print Download</button>
    <Download v-show="false" ref="DownloadComp" />
  </div>
</template>

<script>
  import Download from './Download'
  export default {
    components: {
      Download,
    },
    methods: {
      printDownload () {
          let w = window.open()
          w.document.write(this.$refs.DownloadComp.$el.innerHTML)
          w.document.close()
          w.setTimeout(function () {
            w.print()
          }, 1000)
      }
    },
  }
</script>

更新

方法 2:使用 CSS 生成任意组件的 PDF: 要使用所有内部 HTML 和 CSS 生成 pdf 和自动下载，请使用 VueHtml2pdf npm 包；它有许多自定义选项，可以帮助您将组件下载为 PDF。

这是您的代码的工作示例:

<template>
  <div>
    <button @click="downloadPDF">Print Download</button>
    <VueHtml2pdf :manual-pagination="true" :enable-download="true" ref="DownloadComp">
      <section slot="pdf-content">
            <Download />
        </section>
    </VueHtml2pdf>
    
  </div>
</template>

<script>
import VueHtml2pdf from 'vue-html2pdf'
import Download from './Download'
export default {
  components: {
    Download,
    VueHtml2pdf
  },
  methods: {
    downloadPDF () {
        this.$refs.DownloadComp.generatePdf()
    }
  },
}
</script>