如何在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文档方法并将download.vue组件导入到main_file.vue组件中，然后使用 $refs 传递 download.vue 组件的innerHTML 。

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

下面的代码片段将为您提供一个打印对话框，您可以在其中打印或保存 PDF。

主文件.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： 要生成 pdf 并自动下载所有内部 HTML 和 CSS，请使用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>