index.vue
<template><div class="app"><el-button type="primary" size="small" @click="exportPDF">导出pdf</el-button><h1>导出PDF进度：{{ progress }}</h1><vue-html2pdf:show-layout="controlValue.showLayout":float-layout="controlValue.floatLayout":enable-download="controlValue.enableDownload":preview-modal="controlValue.previewModal":filename="controlValue.filename":paginate-elements-by-height="controlValue.paginateElementsByHeight":pdf-quality="controlValue.pdfQuality":pdf-format="controlValue.pdfFormat":pdf-orientation="controlValue.pdfOrientation":pdf-content-width="controlValue.pdfContentWidth":manual-pagination="controlValue.manualPagination":html-to-pdf-options="htmlToPdfOptions"@progress="onProgress($event)"@hasDownloaded="hasDownloaded($event)"ref="html2Pdf"><pdf-content @domRendered="domRendered()" slot="pdf-content" /></vue-html2pdf></div>
</template><script>
import VueHtml2pdf from "vue-html2pdf";
import PdfContent from "./PdfContent.vue";
export default {components: {VueHtml2pdf,PdfContent,},data() {return {controlValue: {showLayout: true,floatLayout: true,enableDownload: true,previewModal: false,paginateElementsByHeight: 300,manualPagination: true,filename: "嘻嘻哈",pdfQuality: 2,pdfFormat: "a4",pdfOrientation: "portrait",pdfContentWidth: "800px",},progress: 0,};},computed: {htmlToPdfOptions() {return {margin: 0,filename: "嘻嘻哈.pdf",image: {type: "jpeg",quality: 0.98,},enableLinks: true,html2canvas: {scale: this.controlValue.pdfQuality,useCORS: true,},jsPDF: {unit: "in",format: this.controlValue.pdfFormat,orientation: this.controlValue.pdfOrientation,},};},},methods: {exportPDF() {this.$refs.html2Pdf.generatePdf();},domRendered() {console.log("Dom Has Rendered");this.contentRendered = true;},onProgress(progress) {this.progress = progress;},hasDownloaded(blob) {console.log("download-->", blob);},},
};
</script><style lang="less" scoped>
/deep/.vue-html2pdf .layout-container {top: 30px !important;
}
</style>
pdfcontent.vue
<template><div class="pdf-content"><h1>测试111</h1><img src="@/assets/imgs/1.png" alt="" /><h3 class="html2pdf__page-break">表格信息</h3><div class="table-box"><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></div><div class="chart-box" ref="chart_box_ref"></div><p class="html2pdf__page-break">系休息嘻嘻</p><p>这里是很多的注释内容，当做一页</p></div>
</template><script>
import * as echarts from "echarts";
export default {data() {return {tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],};},mounted() {const chart = echarts.init(this.$refs.chart_box_ref);const option = {tooltip: {trigger: "axis",axisPointer: {type: "shadow",},},legend: {},xAxis: [{type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},],yAxis: [{type: "value",},],series: [{name: "Direct",type: "bar",emphasis: {focus: "series",},data: [320, 332, 301, 334, 390, 330, 320],},{name: "Email",type: "bar",stack: "Ad",emphasis: {focus: "series",},data: [120, 132, 101, 134, 90, 230, 210],},{name: "Union Ads",type: "bar",stack: "Ad",emphasis: {focus: "series",},data: [220, 182, 191, 234, 290, 330, 310],},],};chart.setOption(option);},
};
</script><style lang="less" scoped>
.chart-box {height: 300px;
}
</style>
