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

Question

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

download.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>

Answer 1

您可以使用 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>

Answer 2

您需要一个组件来从任何 URL 下载任何文件，因此，对于这种情况，我们可以创建一个组件来完成此操作 objective，我们可以使用 fetch API (https://developer.mozilla.org/es/docs/Web/API/Fetch_API):

<template>
  <button @mousedown="downloadFile">Download File</button>
</template>

<script>
export default {
  props: ["file", "name"],
  methods: {
    downloadFile() {
      const me = this;
      fetch(me.file)
        .then((resp) => resp.blob())
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = url;
          // the filename you want
          a.download = me.name || "file.json";
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          alert("your file has downloaded!"); // or you know, something with better UX...
        })
        .catch(() => alert("oh no!"));
    },
  },
};
</script>

现在，在某些组件中我们这样调用它：

<template>
  <download-button :file="file" name="myFilename.json" />
</template>

<script>
import DownloadButton from "./DownloadButton";
export default {
  name: "SomeComponent",
  components: {
    DownloadButton,
  },
  data() {
    return {
      file: "https://jsonplaceholder.typicode.com/todos/1",
    };
  },
  props: {
    msg: String,
  },
};
</script>

只需更改您的 PDF 的 URL 和名称。

更新：要将 DOM 的某些部分下载为 PDF，您可以使用 html2pdf.js (https://www.npmjs.com/package/html2pdf.js)

因此，在这种情况下，您需要像这样调整您的组件：

<template>
  <button @mousedown="downloadFile">Download File</button>
</template>

<script>
import html2pdf from "html2pdf.js";

export default {
  props: ["dom", "name"],
  methods: {
    downloadFile() {
      const me = this;

      const invoice = document.querySelector(me.dom);
      var opt = {
        margin: 1,
        filename: me.name,
      };
      html2pdf().from(invoice).set(opt).save();
    },
  },
};
</script>

在某些组件中，您可以这样调用它：

<template>
  <div>
    <div class="container d-flex justify-content-center mt-50 mb-50">
      <div class="row">
        <div class="col-md-12 text-right mb-3">
          <download-button
            class="btn btn-primary"
            dom="#invoice"
            name="myFilename.pdf"
          />
        </div>
        <div class="col-md-12">
          <div class="card" id="invoice">
            <div class="card-header bg-transparent header-elements-inline">
              <h6 class="card-title text-primary">Sale invoice</h6>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-sm-6">
                  <div class="mb-4 pull-left">
                    <ul class="list list-unstyled mb-0 text-left">
                      <li>2269 Six Sigma</li>
                      <li>New york city</li>
                      <li>+1 474 44737 47</li>
                    </ul>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="mb-4">
                    <div class="text-sm-right">
                      <h4 class="invoice-color mb-2 mt-md-2">
                        Invoice #BBB1243
                      </h4>
                      <ul class="list list-unstyled mb-0">
                        <li>
                          Date:
                          <span class="font-weight-semibold"
                            >March 15, 2020</span
                          >
                        </li>
                        <li>
                          Due date:
                          <span class="font-weight-semibold"
                            >March 30, 2020</span
                          >
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="d-md-flex flex-md-wrap">
                <div class="mb-4 mb-md-2 text-left">
                  <span class="text-muted">Invoice To:</span>
                  <ul class="list list-unstyled mb-0">
                    <li>
                      <h5 class="my-2">Tibco Turang</h5>
                    </li>
                    <li>
                      <span class="font-weight-semibold"
                        >Samantha Mutual funds Ltd</span
                      >
                    </li>
                    <li>Gurung Street</li>
                    <li>23 BB Lane</li>
                    <li>Hong kong</li>
                    <li>234 456 5678</li>
                    <li><a href="#" data-abc="true">tibco@samantha.com</a></li>
                  </ul>
                </div>
                <div class="mb-2 ml-auto">
                  <span class="text-muted">Payment Details:</span>
                  <div class="d-flex flex-wrap wmin-md-400">
                    <ul class="list list-unstyled mb-0 text-left">
                      <li>
                        <h5 class="my-2">Total Due:</h5>
                      </li>
                      <li>Bank name:</li>
                      <li>Country:</li>
                      <li>City:</li>
                      <li>Address:</li>
                      <li>IBAN:</li>
                      <li>SWIFT code:</li>
                    </ul>
                    <ul class="list list-unstyled text-right mb-0 ml-auto">
                      <li>
                        <h5 class="font-weight-semibold my-2">,090</h5>
                      </li>
                      <li>
                        <span class="font-weight-semibold">Hong Kong Bank</span>
                      </li>
                      <li>Hong Kong</li>
                      <li>Thurnung street, 21</li>
                      <li>New standard</li>
                      <li>
                        <span class="font-weight-semibold">98574959485</span>
                      </li>
                      <li>
                        <span class="font-weight-semibold">BHDHD98273BER</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="table-responsive">
              <table class="table table-lg">
                <thead>
                  <tr>
                    <th>Description</th>
                    <th>Rate</th>
                    <th>Hours</th>
                    <th>Total</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <h6 class="mb-0">Arts and design template</h6>
                      <span class="text-muted"
                        >in reprehenderit in voluptate velit esse cillum dolore
                        eu fugiat nulla pariatur.Duis aute irure dolor in
                        reprehenderit</span
                      >
                    </td>
                    <td>0</td>
                    <td>180</td>
                    <td><span class="font-weight-semibold">0</span></td>
                  </tr>
                  <tr>
                    <td>
                      <h6 class="mb-0">Template for desnging the arts</h6>
                      <span class="text-muted"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit, sed do eiusmod tempor</span
                      >
                    </td>
                    <td>0</td>
                    <td>100</td>
                    <td><span class="font-weight-semibold">0</span></td>
                  </tr>
                  <tr>
                    <td>
                      <h6 class="mb-0">Technical support international</h6>
                      <span class="text-muted"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit, sed do eiusmod tempor</span
                      >
                    </td>
                    <td>0</td>
                    <td>0</td>
                    <td><span class="font-weight-semibold">0</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="card-body">
              <div class="d-md-flex flex-md-wrap">
                <div class="pt-2 mb-3 wmin-md-400 ml-auto">
                  <h6 class="mb-3 text-left">Total due</h6>
                  <div class="table-responsive">
                    <table class="table">
                      <tbody>
                        <tr>
                          <th class="text-left">Subtotal:</th>
                          <td class="text-right">,090</td>
                        </tr>
                        <tr>
                          <th class="text-left">
                            Tax: <span class="font-weight-normal">(25%)</span>
                          </th>
                          <td class="text-right"></td>
                        </tr>
                        <tr>
                          <th class="text-left">Total:</th>
                          <td class="text-right text-primary">
                            <h5 class="font-weight-semibold">,160</h5>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="text-right mt-3">
                    <button type="button" class="btn btn-primary">
                      <b><i class="fa fa-paper-plane-o mr-1"></i></b> Send
                      invoice
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <span class="text-muted"
                >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur.Duis aute irure dolor in reprehenderit</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DownloadButton from "./DownloadButton";
export default {
  name: "SomeComponent",
  components: {
    DownloadButton,
  },
};
</script>

您可以在此处查看其工作原理：https://codesandbox.io/s/wonderful-meadow-m5k67?file=/src/components/DownloadButton.vue:0-429

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

How to download a vue file as pdf file in vuejs?

javascript

vue.js

vuetify.js