vue 中的打印局部打印

进阶de程序猿

已于 2022-02-26 10:11:15 修改

阅读量821

点赞数

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

于 2022-02-16 16:56:38 首次发布

本文链接：https://blog.csdn.net/qq_45101496/article/details/122967213

版权

这篇博客主要探讨在Vue.js应用中如何实现局部打印快递单，其中包括处理含有Base64图片的场景。文章提到了在main.js中引入print.js，并展示了.vue文件中的打印实现。同时，博主遇到了初始化显示白板或打印旧信息的问题，通过引用/LodopFuncs.js的两个demo进行了解决，特别是针对上线后CLodopfuncs.js访问失败导致的打印失效问题。

摘要由CSDN通过智能技术生成

下载print.js print
下载在项目main.js导入
main.js

import Print from '../config/print'
Vue.use(Print)

.vue
局部打印了快递单号，里面有base 64的图片

<div ref="printarea" v-html="parinlist">
         <div v-html="parinlist">{
   {
   parinlist}}</div>
      </div>

根据接口返回
if (res.status === 200) {
   
   this.parinlist = res.result;
   console.log(this.parinlist);
   this.$print(this.$refs.printarea);
}

有时可能会遇到初始打开为白板，或者点开一条信息打印的还是上一条信息的时候
加上

this.$nextTick(() => {
   
     this.$print(this.$refs.printarea);
      });

/LodopFuncs.js demo1


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
        <param name="Caption" value="显示区">
        <param name="Border" value="0">
        <param name="Color" value="white"