前端實(shí)現(xiàn)打印網(wǎng)頁(yè)內(nèi)容的解決方案(附完整代碼)

更新時(shí)間：2025年02月08日 10:49:16 作者：編程豬豬俠

這篇文章主要介紹了如何使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)打印功能,主要通過(guò)Vue和Element Plus框架進(jìn)行封裝,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

技術(shù)實(shí)現(xiàn)：

打印方法通過(guò)js原生封裝,

框架采用的是vue和elementplus(單純想實(shí)驗(yàn)一下打印方法的可以不用，直接復(fù)制下方代碼塊即可)

實(shí)現(xiàn)邏輯：

1.函數(shù)入口printHtml，傳入對(duì)應(yīng)的參數(shù)，節(jié)點(diǎn)，縮放比例(可以使百分比或數(shù)字但不能為負(fù))以及覆蓋樣式。

2.樣式設(shè)置: 調(diào)用 getStyle 函數(shù)以獲取打印相關(guān)的樣式，并傳入縮放比例和覆蓋樣式。

3.容器創(chuàng)建: 調(diào)用 getContainer 函數(shù)，將需要打印的 HTML 內(nèi)容放入一個(gè)新的 DOM 元素（div）添加到文檔: 將樣式和內(nèi)容容器添加到 body 中以便于打印。

4.加載圖片: 調(diào)用 getLoadPromise 函數(shù)確保所有圖片加載完成后，才觸發(fā)打印操作。打印完成后清理: 打印完成后，移除添加的樣式和內(nèi)容容器。

封裝方法代碼如下:

export default function printHtml(
  html: any,
  zoom?: any,
  overrideStyle?: string
) {
  const style = getStyle(zoom, overrideStyle);
  const container = getContainer(html);
  document.body.appendChild(style);
  document.body.appendChild(container);

  getLoadPromise(container).then(() => {
    window.print();
    document.body.removeChild(style);
    document.body.removeChild(container);
  });
}
function getStyle(zoom?: any, overrideStyle?: string) {
  const styleContent =
    `
    #print-container {
      display: none;
      zoom:${zoom ?? "normal"};
    }
  
    @media print {
        body > :not(.print-container) {
            display: none;
        }
        html,
        body {
            display: block !important;
        }
        body {
          height:auto;
        }
        #print-container {
            display: block;
        }
  
    }` + overrideStyle;
  const style = document.createElement("style");
  style.innerHTML = styleContent;
  return style;
}
function cleanPrint() {
  const div = document.getElementById("print-container");
  if (!!div) {
    document.querySelector("body")?.removeChild(div);
  }
}
function getContainer(html: any) {
  cleanPrint();
  const container = document.createElement("div");
  container.setAttribute("id", "print-container");
  container.innerHTML = html;
  return container;
}
function getLoadPromise(dom: any) {
  let imgs = dom.querySelectorAll("img");
  imgs = [].slice.call(imgs);

  if (imgs.length === 0) {
    return Promise.resolve();
  }

  let finishedCount = 0;
  return new Promise((resolve) => {
    function check() {
      finishedCount++;
      if (finishedCount === imgs.length) {
        resolve({});
      }
    }
    imgs.forEach((img: any) => {
      img.addEventListener("load", check);
      img.addEventListener("error", check);
    });
  });
}

調(diào)用:

具體調(diào)用可以參考一下下方的vue代碼，我是將打印的內(nèi)容放入到自己二次封裝的彈框中去了

<template>
  <ElButton type="primary" @click="visible = true">喚起打印推彈框</ElButton>
  <ProModal v-model:visible="visible" title="打印" @ok="success">
    <div id="myContent" :style="myContent">
      <div class="header">居民個(gè)人信息</div>
      <ElDescriptions
        title="無(wú)恥之徒"
        direction="vertical"
        :column="4"
        :size="'default'"
        border
        class="table"
      >
        <ElDescriptionsItem label="Username"
          >伊恩加拉格</ElDescriptionsItem
        >
        <ElDescriptionsItem label="Telephone"
          >18100000000</ElDescriptionsItem
        >
        <ElDescriptionsItem label="Place" :span="2"
          >南區(qū)</ElDescriptionsItem
        >
        <ElDescriptionsItem label="Remarks">
          <ElTag size="small">School</ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="Address">
          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
        </ElDescriptionsItem>
      </ElDescriptions>
    </div>
  </ProModal>
</template>
<script setup lang="ts">
import { ProSelect, ProModal } from "@/components/ProComponents/index";
import { ref } from "vue";
import { ElButton, ElDescriptions, ElDescriptionsItem ,ElTag } from "element-plus";
import printHtml from "@/utils/print";

const visible = ref(false);

const myContent: any = {
  wordBreak: "break-all",
  padding: "0 30px 50px 30px",
  color: "#000",
  fontFamily: "宋體",
  maxHeight: window.screen.availHeight * 0.6,
  overflowY: "auto",
};

//執(zhí)行打印
const success = () => {
  printHtml(window.document.getElementById(`myContent`)?.innerHTML ?? "");
};

const updateSelect = (val: any) => {
  console.log(val);
  val.forEach((item: any) => {
    console.log(item);
  });
};
</script>

<style lang="less" scoped>
.header {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}

.table {
  margin: 0 auto;
}
</style>

實(shí)現(xiàn)效果如下：

總結(jié)

到此這篇關(guān)于前端實(shí)現(xiàn)打印網(wǎng)頁(yè)內(nèi)容解決方案的文章就介紹到這了,更多相關(guān)前端打印網(wǎng)頁(yè)內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: