vue 实现打印功能，打印的时候加上水印图片

安装依赖

npm install print-js --save

页面引入

import print from 'print-js'

打印按钮

<el-button type="primary" v-if="itemList.length>0" @click="printSomething">打印</el-button>

打印的内容

使用

不想要打印的内容加上水印图片 删除这块内容

<p class="titleImg"><img class="titleLogo" src="@/assets/logo/printLogo.jpg" alt=""></p> 

答： 如果你的水印是动态的，比如需要用到在登陆之后才能获取到的信息，可以在登陆接口成功的回调之后，调用一次该水印方法，然后将这些信息保存到localStorage中去，在main.js中获取，再调用一次该水印方法。这样，就可以实现动态的水印，且刷新不会消失。

参考： vue项目中添加水印

Canvas简介及实践：

canvas是HTML5新增的元素，主要作用是支持用JS画图。

一、创建Canvas元素

二、通过JavaScript来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

•1:JavaScript使用id来寻找canvas元素。

•2:创建context对象。getContext(“2d”)对象是内建的HTML5对象。

3:绘制一个红色的矩形。fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸

三、实例-图像 把一幅图像放置到画布上：

四、水印生成主流程

1、建立一个画布：

2、生成水印字符串：

3、CanvasElement.toDataURL() 方法返回一个包含图片展示的data URLs，包含了Base64过的图像信息。说明：Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. 例如：“data:image/pngbase64,R0lGODdhMAAwAPAAAAAAAP”

4、平铺在background上

---