Vue实现分页导出，打印

Vue使用html2Canvas+printJS实现分页导出，打印

1.插件引入

npm i html2canvas

npm i print-js

2.使用模板

<template><div class="dymb"><el-button @click="getPdf()">导出PDF</el-button><el-button @click="goPrint()">打印PDF</el-button><div class="pdfContent " id="pdfDom" ref="print"><!-- 正面模板 --><div class="content marginBottom" style="page-break-after:always"><!-- <div v-for="i in 83" :key="i">{{i}}</div> --></div><!-- 背面模板 --><div class="content content2 " style="page-break-after:always"><!-- <div v-for="i in 83" :key="i">{{i}}</div> --></div></div></div></template><script>
import html2Canvas from 'html2Canvas'
import printJS from 'print-js'
export default {name: 'dymb',data () {return {htmlTitle: '标题',}},watch: {},created () {},mounted () {},methods: {goPrint () {this.isPrint = truehtml2Canvas(this.$refs.print, {allowTaint: true,taintTest: false,useCORS: true,dpi: window.devicePixelRatio * 4,scale: 4}).then((canvas) => {const url = canvas.toDataURL('image/jpeg', 1.0)printJS({printable: url, // 要打印的idtype: 'image',style: '@page{size:auto;margin: 1.5cm 1cm 1.5cm 1cm;}' //去除页眉页脚})this.isPrint = false})}}
}
</script><style lang="scss" scoped>
//  @page {//    size: auto;
//    margin: 0 5px;
//  }
.dymb {width: 100%;height: 100%;overflow: auto;.pdfContent {width: 1240px;margin: 0 auto;box-sizing: border-box;}.content {width: 1240px;height: 1754px;border: 1px #1c1 solid;box-sizing: border-box;// margin: 0 auto;}.content2 {width: 1240px;height: 1700px;border: 1px #1c1 solid;box-sizing: border-box;}.marginBottom {margin-bottom: 30px;}.zm {}.bm {}
}
</style>

3.导出方法封装

// htmlToPdf.js
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {install (Vue, options) {Vue.prototype.getPdf = function () {var title = this.htmlTitle  //DPF标题html2Canvas(document.querySelector('#pdfDom'), {allowTaint: true,taintTest: false,useCORS: true,y: 1, // 对Y轴进行裁切// width:1200,// height:5000,// width: 1240,// height: 3508,dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍scale: 4 //按比例增加分辨率 }).then(function (canvas) {let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let PDF = new JsPDF('', 'pt', 'a4')if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')})}}
}

4.main.js引入

// 导出
import htmlToPdf from './utils/htmlToPDF.js'
Vue.use(htmlToPdf)

如有不足，请多指教，
未完待续，持续更新！
大家一起进步！

Vue实现分页导出，打印相关推荐

WEB页面导出为Word文档后分页横向打印的方法
< html > < HEAD > < title >WEB页面导出为Word文档后分页&横向打印的方法 </ titl ...
java分页导出excel_报表中利用API来实现导出excel列后分页
在报表中,当统计报表统计的指标非常多,在页面上展现的时候,整个报表会变得非常的长,经常会通过设置滚动条拖拽来查看整个报表,当这时用不分页导出excel后,查看excel中报表被导出到一个sheet中, ...
vue 实现Excel 导出
前言数据表格的导出,是实际开发的常见功能,前后端都可以实现表格导出,讲解自己在用的一种. 获取数据源,可以通过后端接口实现,也可以利用分页查询的表格接口来实现. 处理数据,对excel表格的表头(最 ...
ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询实现参数转换层最终对接效果在上一篇博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...
Qt编写物联网管理平台42-数据查询导出打印
一.前言本系统存储的三大类记录,运行日志.报警日志.用户日志,这些不同类似的记录,都需要提供查询功能,可以按照记录的时间范围等条件查询,查询的记录需要做分页显示,为了分页显示还特意花了很多时间专门封 ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
vue实现pdf导出，解决生成canvas模糊等问题
vue实现pdf导出,解决生成canvas模糊等问题参考文章: (1)vue实现pdf导出,解决生成canvas模糊等问题 (2)https://www.cnblogs.com/jsonYoung/ ...
vue+element-ui文件导出模板及导入xlsx文件
vue文件的导出与导入前言一.导出模板和导入xlsx文件二.导出JS方法,单独写示例 1.接口方法 2.页面调用导出方法三.导入表格JS代码前言当我们做后台管理的时候,不免会遇到导出模版, ...
ant design vue table分页
ant design vue table分页设置 1.设置pagination <a-table :columns="columns" :dataSource="d ...

Vue实现分页导出，打印

Vue使用html2Canvas+printJS实现分页导出，打印

Vue实现分页导出，打印相关推荐

最新文章

热门文章