JS利用iframe實現局部打印 - 戴向天

大家好！我叫戴向天

QQ羣：602504799

如若有不理解的，可加QQ羣進行諮詢瞭解
sheetToSelf 代碼===》https://blog.csdn.net/weixin_41088946/article/details/106767106

由於我在開發的時候項目中含有echart。所以在開始的時候對canvas進行了下處理

// 將canvas的內容轉換成圖片並進行插入到dom裏面去
    document.querySelectorAll('canvas').forEach(canvas => {
      const img = document.createElement('img')
      img.setAttribute('src', canvas.toDataURL("image/png"))
      img.setAttribute('class', 'canvasImage')
      const parentNode = canvas.parentNode.parentNode
      parentNode.parentNode.insertBefore(img, parentNode)
    })
    // 獲取到打印的內容
    const jubuData = document.getElementById("print").innerHTML;
    // 去掉新增的圖片
    document.getElementById("print").querySelectorAll('.canvasImage').forEach(item => {
      item.parentNode.removeChild(item)
    })
    const containerBox = document.createElement('div');
    const container = document.createElement('div');
    containerBox.appendChild(container)
    container.innerHTML = jubuData
    container.querySelectorAll('canvas').forEach(canvas => {
      canvas.parentNode.parentNode.parentNode.removeChild(canvas.parentNode.parentNode)
    })
    document.body.appendChild(containerBox)
    sheetToSelf(container)
    const iframe = document.getElementById('printf') as any;
    const doc = document.all ? iframe.contentWindow.document : iframe.contentDocument;
    doc.open();
    doc.write(container.innerHTML);
    doc.close();
    document.body.removeChild(containerBox)
    iframe.contentWindow.focus();
    // iframe加載完成後再執行打印
    iframe.contentWindow.onload = function () {
      iframe.contentWindow.print()
    }