当前位置：首页 > news >正文

Vue-打印组件页面

news 2025/7/21 6:54:08

场景: 需要将页面的局部信息打印出来，只在前端实现，不要占用后端的资源。经过百度经验，决定使用 print-js和html2canvas组件。

1. 下载包

npm install print-js --save
npm install --save html2canvas

2. 组件内引用

<script>import printJS from 'print-js'import 'print-js/dist/print.css'import html2canvas from 'html2canvas'</script>

3. 执行打印方法

<div><el-card style="height: 780px; overflow: auto;page-break-after:always;"><div ref="printPaperRef"><template v-for="index in 15"><!-- 题目: 序号、类型、题干 --><div><div class="num">{{index}}</div>【单选题】<div style="padding-left: 10px;">这是一道很难很难很难很难的单选题，{{index}}}</div></div><!-- 选项 --><el-radio-group style="width: 100%" ><el-radio v-for="item in ['A', 'B', 'C', 'D']" borderclass="answer_radio"><!-- 选项flex浮动 --><div style="display: inline-flex;width: 90%;"><div class="answer_tag">{{ item }}.</div></div><div style="float: right;"><i class="el-icon-success" style="color:#1aac1a;">答案</i></div></el-radio></el-radio-group></template></div></el-card>
</div>import printJS from 'print-js'import 'print-js/dist/print.css'import html2canvas from 'html2canvas'
export default {name: 'ExamProcess',methods: {// 打印试卷printPaper() {html2canvas(this.$refs.printPaperRef, {backgroundColor: 'white',useCORS: true,foreignObjectRendering: false,windowWidth: document.body.scrollWidth,windowHeight: document.body.scrollHeight}).then((canvas) => {const url = canvas.toDataURL()this.img = urlprintJS({printable: url,type: 'image',documentTitle: "--",base64: 'true'})})}}
}

遇到的问题:

1. html2canvas 文字向下偏移

解决: 使用html2canvas@^1.0.0的版本

2. html2canvas转图片不清晰的问题

解决: 利用增大dpi

dpi:DPI是指某些设备分辨率的度量单位。DPI越低，扫描的清晰度越低，DPI越高，清晰度越高。
由于受网络传输速度的影响，web上使用的图片都是72dpi，照片使用300dpi或者更高350dpi，会很清晰。

html2canvas(template, {dpi: 300,//加了一个这个设置 useCORS: true, //（图片跨域相关）allowTaint: false, //允许跨域（图片跨域相关）x: 0,//页面在横向方向上的滚动距离  横向上没有超过 所以设置为0y: window.pageYOffset,//页面在垂直方向上的滚动距离 设置了以后 超过一屏幕的内容也可以截取windowWidth: document.body.scrollWidth,//获取在x轴上滚动条中内容windowHeight: document.body.scrollHeight,//获取在y轴上滚动条中内容});

解决后的效果: