3步实现WEB批量打印功能Vue+Axios+html2canvas+OnePrinter

项目需求：

项目需要批量打印订单，每张订单都是独立的，因此需要web调用系统打印机进行批量打印。

传统的打印方式是一张张点开然后用Chrome打印，直接放弃。

搜了很久终于找到一款最方便快捷的打印方案：Vue+Axios+html2canvas+OnePrinter实现批量打印功能。

实现思路：

Vue生成base64或者文档，Post给OnePrinter打印控件，实现Web批量打印。

这个方案的好处：

• 不限打印机。
• 不限打印内容。
• 不限打印纸张。

最重要的是，简单，真的简单！

实施方法：

第1步：下载OnePrinter

github.com/chensprojec…

gitee.com/chenrongbin…

解压缩后，打印服务就启动了。

第2步：引入Axios，并创建toPrinter函数

引入Axios，在util文件夹下建一个oneprinter.js，以后所有用得到的地方都调用这个就好了。

// onePrint.js
import {Post} from "@/util/http";
// 传入待打印文件的url或base64
export async function toPrint(url,base64) {
    // url和base64，二选一。
    let obj = {
        key: "", // 如需网络打印，请注册授权获取。如本地打印，留空即可。
        url: url, // 打印文件的地址，如 https://abc.com/1.doc。
        base64: base64 //打印文件的base64代码
    };
    // 如10081端口被占用，请尝试10082端口。
    const res = await Post("http://127.0.0.1:10081/print", obj);
    if (res.data.code === 1) {
        // 执行成功
    }else{
        // 执行失败
    }
}

第3步：用html2canvas生成Base64图片，调用上头的toPrinter

npm install html2canvas

// 生成图片，并获取到base64
const createImage = async () => {
    const canvas = await html2canvas(parent.value, {
      dpi: 300, 
      useCORS: true,
      allowTaint: true,
      logging: false,
      scale: 1,
      onclone: (cb) => {
        cb.getElementById("imageRef").style.display = "block";
      },
    });
    const base64 = canvas.toDataURL("image/png");
      setTimeout(() => {
        toPrint("", base64);
      }, 300);
};

第4步，打印机开动，大功告成！

注意，调用默认打印机打印，所以要提前设置好打印机首选项。