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

我有一个vue，如下所示，当我单击主组件中的按钮时，我想将其下载为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>

*按钮以PDF格式下载上述文件*

您可以使用Javascript文档方法，将下载.vue组件导入主文件.vue组件，然后使用$refs传递download.vue组件的内部HTML

方法1：不带任何插件另存为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>

打印下载
从“./Download”导入下载
导出默认值{
组成部分：{
下载
},
方法：{
打印下载（）{
设w=window.open（）
w、 document.write（this.$refs.DownloadComp.$el.innerHTML）
w、 文件关闭（）
w、 setTimeout（函数（）{
w、 打印（）
}, 1000)
}
},
}

更新

方法2：使用CSS生成任意组件的PDF: 要生成pdf并自动下载所有内部HTML和CSS，请使用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>

打印下载
从“vue-html2pdf”导入VueHtml2pdf
从“./Download”导入下载
导出默认值{
组成部分：{
下载
VueHtml2pdf
},
方法：{
下载PDF（）{
此.$refs.DownloadComp.generatePdf（）
}
},
}

您需要一个组件来从任何URL下载任何文件，因此，在这种情况下，我们可以创建一个组件来实现此目标，我们可以使用fetch API（）：

下载文件
导出默认值{
道具：[“文件”，“名称”]，
方法：{
下载文件（）{
const me=这个；
获取（me.file）
.然后（（resp）=>resp.blob（））
.然后（（blob）=>{
constURL=window.url.createObjectURL（blob）；
常量a=document.createElement（“a”）；
a、 style.display=“无”；
a、 href=url；
//您想要的文件名
a、 下载=me.name | |“file.json”；
文件.正文.附件（a）；
a、 单击（）；
window.URL.revokeObjectURL（URL）；
警告（“您的文件已下载！”；//或者您知道，具有更好用户体验的内容。。。
})
.catch（（）=>警惕（“哦，不！”）；
},
},
};

现在，在某些组件中，我们这样称呼它：

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

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

从“/DownloadButton”导入DownloadButton；
导出默认值{
名称：“SomeComponent”，
组成部分：{
下载按钮，
},
数据（）{
返回{
文件：“https://jsonplaceholder.typicode.com/todos/1",
};
},
道具：{
msg:String，
},
};

只需更改PDF的URL和名称

更新：要以PDF格式下载DOM的某些部分，可以使用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>

下载文件
从“html2pdf.js”导入html2pdf；
导出默认值{
道具：[“dom”，“name”]，
方法：{
下载文件（）{
const me=这个；
const invoice=document.querySelector（me.dom）；
变量opt={
差额：1，
文件名：me.name，
};
html2pdf（）.from（invoice）.set（opt）.save（）；
},
},
};

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

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

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

销售发票

2269六西格玛
纽约市
+1474473747

发票#BBB1243


日期：
2020年3月15日


到期日：
2020年3月30日


发票收件人：


蒂布科图兰


萨曼莎共同基金有限公司

古隆街
23 BB巷
香港
234 456 5678


付款详情：


应付总额：

银行名称：
国家：
城市：
地址:
伊班：
SWIFT代码：



$1,090