基于printJs打印

256 阅读1分钟

我是在react项目中测试。 正常npm安装printjs

  npm install print-js --save

然后选中页面里面一个元素打印,发现用的antd样式丢失,这还真不知道如何在打印的时候把antd样式引入。

import printJS from "print-js";

printJS({printable: "id", type: 'html',style: '@page { size: auto; margin: 0mm; }'})

退而求其次,将元素生成图片再打印。 先安装**html-to-image**

npm install --save html-to-image

然后先html转换图片,然后打印

//引入htmlToImage
import * as htmlToImage from 'html-to-image';
//引入printjs
import printJS from "print-js";

 htmlToImage.toPng(printContentRef.current)
         //这里的dataUrl是base64的图片数据
        .then(function (dataUrl) {
            printJS({printable: dataUrl, type: 'image',style: '@page { size: auto; margin: 0mm; }'})
        })
        .catch(function (error) {
            console.error('oops, something went wrong!', error);
        });

思考,如果遇到分页的该怎么办呢