如何在 vuejs 中將 vue 文件下載為 pdf 文件？

Question

我有一個如下的 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>

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>

更新

Method 2: Generate PDF of Any Component with CSS: To generate pdf and auto-download with all inner HTML and CSS, use the VueHtml2pdf npm package; 它有許多自定義選項，可以幫助您將組件下載到 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 下載任何文件，因此，對於這種情況，我們可以創建一個組件來實現此目標，我們可以使用 fetch API ( Z5E056C500A1C4B6A7110//docsZ/Web50D807BADEs. 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 和名稱即可。

更新：要下載 PDF DOM 的某些部分，您可以使用 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">$1,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>$120</td>
                    <td>180</td>
                    <td><span class="font-weight-semibold">$300</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>$140</td>
                    <td>100</td>
                    <td><span class="font-weight-semibold">$240</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>$250</td>
                    <td>$250</td>
                    <td><span class="font-weight-semibold">$500</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">$1,090</td>
                        </tr>
                        <tr>
                          <th class="text-left">
                            Tax: <span class="font-weight-normal">(25%)</span>
                          </th>
                          <td class="text-right">$27</td>
                        </tr>
                        <tr>
                          <th class="text-left">Total:</th>
                          <td class="text-right text-primary">
                            <h5 class="font-weight-semibold">$1,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