vue打印自定义部分为图片

本文实现的需求是生成二维码并加上标题打印

这里使用vue-print-nb实现打印功能

安装vue-print-nb

vue2 安装

npm install vue3-print-nb --save

vue3 安装

npm install vue3-print-nb --save

引入vue-print-nb

vue2 引入

// 1. 全局挂载 （main.js）
import Print from 'vue-print-nb'
Vue.use(Print)

// 2. 自定义指令（所需页面引入，directives与data同级）
import print from 'vue-print-nb'
directives: {
  print
}

vue3 引入

// 全局指令
import  {  createApp  }  from  'vue' 
import  App  from  './App.vue' 
import  print  from  'vue3-print-nb' 
const  app  =  createApp ( App ) 
app . 使用（打印）
应用程序。挂载（'#app' ）

//或者

// 本地指令
import  print  from  'vue3-print-nb'
directives: {
  print
}

使用

支持两种打印方式，直接打印页面HTML，打印URL

1·直接打印页面

 <button v-print="printObj">Print local range</button><div id="loading" v-show="printLoading"></div>
  <div id="printMe" style="background:red;">
        <p>葫芦娃，葫芦娃</p>
        <p>一根藤上七朵花 </p>
        <p>小小树藤是我家 啦啦啦啦 </p>
        <p>叮当当咚咚当当　浇不大</p>
        <p> 叮当当咚咚当当 是我家</p>
        <p> 啦啦啦啦</p>
        <p>...</p>
    </div>

data中定义配置属性

export default {
    data() {
        return {
           printLoading: true,
            printObj: {
              id: 'printMe', //你上面定义的打印部分id
	          standard:'HTML5',
	          popTitle: '', // 打印配置页上方的标题
	          extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
	          preview: false, // 是否启动预览模式，默认是false
	          previewTitle: '打印预览的标题', // 打印预览的标题
	          previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
	          zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
	          previewBeforeOpenCallback () { console.log('正在加载预览窗口！');  }, // 预览窗口打开之前的callback
	          previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
	          beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
	          openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
	          closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
	          clickMounted () { console.log('点击v-print绑定的按钮了！') },
	          standard: '',
	          extarCss: ''
            },
            
            
        };
    }
}

具体参数配置与属性可自行在官网查找。

2·打印网址

如果需要打印指定的URL，可以使用如下方法：（确保你的URL是同源策略）

 <button v-print="printObj">Print local range</button>

 export default {
    data() {
        return {
            printObj: {
              url: 'http://localhost:8080/'
              beforeOpenCallback (vue) {
                console.log('打开之前')
              },
              openCallback (vue) {
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

打印预览

支持打印预览，printObj中加入preview:true，支持所有打印方式（请参考直接打印页面中代码，有注释）

剩余的其他的方法和参数的使用请自己参考vue-print-nb官网说明

注意

使用过程中可能会踩的坑
1.使用直接打印页面的方式，需要打印的页面部分中存在服务器的图片如

<img :src="qrCode" style="width: 400px;height: 400px;" alt="" >

qrCode为后端接口返回的img地址，这时候图片会打印不出来，其他部分正常，图片会提示跨域，我查找其他文章都是说后端nginx配置代理，我们后端使用没有生效，不知道是否配置问题，所以换了种解决方案，这里的图片传递方式使用base64传递，这样就可以正常打印了。
2.打印的时候有些人会发现html配置的css样式中背景颜色没有生效，这里不是代码问题，浏览器自带的打印会有个选项配置页面背景，可以自己开启或者关闭。