前端实现打印

最新推荐文章于 2024-05-02 12:25:19 发布

肥喵蒙太奇

最新推荐文章于 2024-05-02 12:25:19 发布

阅读量369

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/YYYYYun/article/details/119424857

版权

前端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

vue

31 篇文章 1 订阅

订阅专栏

本文探讨了如何使用HTML2Canvas库将网页内容转换为可打印的HTML或导出为PDF，包括两种方法：直接替换页面内容再调用window.print()，以及通过新窗口打印以避免事件失效。还介绍了借助插件和导出图片进行PDF下载的尝试。

摘要由CSDN通过智能技术生成

// window.print()
// 获得要打印元素的内容
// 保存当前页面的整个html
// 把当前页面替换为打印内容
// 执行打印操作
// 还原当前页面
// 缺点：打印后页面绑定的事件失效
 let screenFullHtml = document.body.innerHTML
 let printHtml=document.getElementById('printCont').innerHTML;
 document.body.innerHTML = printHtml;
 window.print()
 document.body.innerHTML = screenFullHtml;

// 获得要打印元素的内容
// 缺点： 会导致页面样式丢失
let printHtml=document.getElementById('printCont').innerHTML;
let newWindow= window.open("",'newwindow');
newWindow.document.body.innerHTML = printHtml;
newWindow.print();

// 借助插件实现
html2canvas(document.getElementById('printCont')).then(canvas=>{
    var newstr = document.getElementById("printCont").innerHTML;
    let printWindow = window.open("",'printWindow');
    let oImg = new Image();
    oImg.src = canvas.toDataURL();  // 导出图片
    let contentWidth = canvas.width; 
    let contentHeight = canvas.height;
    console.log(contentWidth,contentHeight)
    // oImg.width = 595.28; 
    // oImg.height = 555.28/contentWidth * contentHeight;
    oImg.width = contentWidth; 
    oImg.height = contentHeight;
    printWindow.document.body.appendChild(oImg);
    oImg.onload = function (){
      printWindow.print();
      printWindow.close()
    }
})

在这里插入图片描述

生成pdf 下载测试（未完成）

html2canvas(document.getElementById('printCont')).then(canvas=>{
  // canvas为转换后的Canvas对象
  let img = new Image();
  img.src = canvas.toDataURL();  // 导出图片
  // document.body.appendChild(img);  // 将生成的图片添加到body
  $("img").attr("src",img.src);
  var link = document.createElement("a");    
  link.setAttribute("download","下载");
  link.href = oImg.src;
  link.click();
})