前端項目實戰126-html2canvas 進行列印

import html2canvas from "html2canvas";

//級聯選擇框選擇事件
 export function printData(id: any){ // 定義列印方法
    // 先用html2canvas将頁面整個轉為一張截圖，再列印，防止出現echarts無法列印
    const dom: HTMLElement | null = document.getElementById(id); //擷取需要列印的區域
    console.log(dom,"dom")
    html2canvas(dom as HTMLElement, {
        scale: 2,
        width: dom?.offsetWidth,
        height: dom?.offsetHeight,
    }).then((canvas:any) => {
        const context: CanvasRenderingContext2D | null = canvas.getContext("2d");
        // context!.mozImageSmoothingEnabled = false;
        // context!.webkitImageSmoothingEnabled = false;
        // context!.msImageSmoothingEnabled = false;
        context!.imageSmoothingEnabled = false;
        const src64 = canvas.toDataURL();
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        
        const imgWidth = 1800; // 根據紙張寬度設定
        const imgHeight = (1762 / contentWidth) * contentHeight;
        const img = new Image();
        const div = document.createElement("div");
        console.log(imgWidth,imgHeight,contentWidth,contentHeight,"data")
        div.appendChild(img);
        img.setAttribute("src", src64);
        img.setAttribute("width", imgWidth.toString());
        img.setAttribute("height", imgHeight.toString());
        img.setAttribute("id", "imgs");
        div.setAttribute("id", "printImg");
        document.body.appendChild(div);
        window.document.body.innerHTML =
            window.document.getElementById("printImg")!.innerHTML;
        img.onload = () => {
            window.print(); // 調用浏覽器列印
            window.location.reload();
        };
    });
}