时间戳

首页 > 解决方案 > 如何在 vuejs 中将 vue 文件下载为 pdf 文件？

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

问题描述

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

下载.vue

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

main_file.vue

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

标签： javascriptvue.jsvuetify.js

解决方案

您可以使用Javascript window.print文档方法，将您的download.vue组件导入main_file.vue组件，然后使用$refs 传递download.vue 组件的innerHTML。

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

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

main_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>

推荐阅读