I have a vue as below which I want to download as PDF when I click on a button in main_ponent. Please help me find a way around to do so.
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>
I have a vue as below which I want to download as PDF when I click on a button in main_ponent. Please help me find a way around to do so.
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>
2 Answers
Reset to default 6You can use the Javascript window.print document method and import your download.vue ponent into main_file.vue ponent and then pass the innerHTML of download.vue ponent by using $refs.
Method 1: Save as PDF without any plugin.
Here is the code snippet that will give you a dialog of print, where you can print or save 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 {
ponents: {
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>
UPDATE
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; it has many customization options and can help you download your ponent into PDF.
Here is working example with your code:
<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 {
ponents: {
Download,
VueHtml2pdf
},
methods: {
downloadPDF () {
this.$refs.DownloadComp.generatePdf()
}
},
}
</script>
You need a ponent to download any file from any URL, so, for this case, we can create a ponent to acplish this objective, we can use fetch API (https://developer.mozilla/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>
Now, in some ponent we calle it in this way:
<template>
<download-button :file="file" name="myFilename.json" />
</template>
<script>
import DownloadButton from "./DownloadButton";
export default {
name: "SomeComponent",
ponents: {
DownloadButton,
},
data() {
return {
file: "https://jsonplaceholder.typicode./todos/1",
};
},
props: {
msg: String,
},
};
</script>
Just change the URL for your PDF and the name.
UPDATE: To download AS PDF some section of your DOM you can use html2pdf.js (https://www.npmjs./package/html2pdf.js)
So, in this case, you need to adapt your ponent like this:
<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>
And in some ponent you can call it in this way:
<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">[email protected]</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 modo 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",
ponents: {
DownloadButton,
},
};
</script>
You can check how it works here: https://codesandbox.io/s/wonderful-meadow-m5k67?file=/src/ponents/DownloadButton.vue:0-429
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743635245a4482039.html
评论列表（0条）