import html2canvas from "html2canvas"; import printJS from "print-js"; /** * html转图片 * @param printContent 传入一个ref * @param callback */ export const htmlToCanvas = ( printContent: HTMLElement, callback: (url: string) => void ) => { // // 获取dom 宽度 高度 // const width = printContent.clientWidth; // const height = printContent.clientHeight; // // 创建一个canvas节点 // const canvas = document.createElement("canvas"); // // const scale = 1; // 定义任意放大倍数,支持小数;越大,图片清晰度越高,生成图片越慢。 // canvas.width = width * scale; // 定义canvas 宽度 * 缩放 // canvas.height = height * scale; // 定义canvas高度 *缩放 // canvas.style.width = width * scale + "px"; // canvas.style.height = height * scale + "px"; // canvas.getContext("2d").scale(scale, scale); // 获取context,设置scale // // const scrollTop = // document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度 // const scrollLeft = // document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度 html2canvas(printContent) .then((canvas) => { const url = canvas.toDataURL("image/png"); callback(url); }) .catch((err) => { console.error(err); }); }; /** * 用printJs打印图片 * @param url * @param callback */ export const printImg = (url: string) => { printJS({ printable: url, type: "image", documentTitle: "", // 标题 style: "@page{size:auto;margin: 1cm ;}", // 去除页眉页脚 }); }; /** * html转图片打印 * @param dom * @param callback */ export const html2CanvasPrint = (dom: HTMLElement, callback?: () => {}) => { //1、html转图片 htmlToCanvas(dom, (url: string) => { //2、打印图片 printImg(url); }); };