window.print()实现局部打印及遇到的问题

最新推荐文章于 2024-06-10 16:43:59 发布
最新推荐文章于 2024-06-10 16:43:59 发布
阅读量2k 收藏 7
点赞数
分类专栏： javascript 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45546982/article/details/125580854
版权

window.print()实现局部打印及遇到的问题

公司的一个后台管理系统需要实现打印一个签收单，我选择用window.print()实现打印，但是遇到了一些问题；需求实现的效果：
打印时需要隐藏顶部的按钮，只打印中间的签收单，我们这个项目是vue+elementui实现，原本这个表单是用element组建件实现的，但是打印时会出现各种样式乱掉的问题，最后我放弃了组件自己写样式；在这里插入图片描述

原本代码

<template>
  <div
    class="download-receipt"
  >
    <el-button
      class="download-receipt__print"
      type="primary"
      size="mini"
      @click="goBack"
    >
      返回
    </el-button>
    <el-button
      class="download-receipt__print"
      type="primary"
      size="mini"
      @click="print"
    >
      打印签收单
    </el-button>
    <div 
      id="print"
      class="download-receipt__content" 
    >
      <h2 class="download-receipt__title">
        卡册领用签收单
      </h2>
      <h3>基础信息</h3>
      <div
        class="download-receipt__line"
        style="height: auto;"
      >
        <p
          class="download-receipt__lable"
          style="width: 149px;display: flex;align-items: center;justify-content: flex-start;"
        >
          申请单编号
        </p>
        <div
          style="width: 448px;height: auto;word-break: break-all;display: flex;align-items: center;justify-content: flex-start;padding: 10px;"
        >
          {{ cardookReceiptData.sysNo }}
        </div>
      </div>
      <div
        class="download-receipt__line"
        style="height: auto;"
      >
        <p
          class="download-receipt__lable"
          style="width: 149px;display: flex;align-items: center;justify-content: flex-start;"
        >
          客户名称
        </p>
        <div
          style="width: 448px;height: auto;word-break: break-all;display: flex;align-items: center;justify-content: flex-start;padding: 10px;"
        >
          {{ cardookReceiptData.bigCustomerName }}
        </div>
      </div>

      <div class="download-receipt__line">
        <div class="download-receipt__line--item">
          <p
            class="download-receipt__lable"
            style="width: 149px;"
          >
            申请日期
          </p>
          <span
            class="download-receipt__value"
            style="width: 148.5px;"
          >
            {{ cardookReceiptData.applyDate }}
          </span>
        </div>
        <div class="download-receipt__line--item">
          <p
            class="download-receipt__lable"
            style="border-left: 1px solid #000;width: 149px;"
          >
            购买用途
          </p>
          <span
            class="download-receipt__value"
            style="width: 148.5px;"
          >
            {{ cardookReceiptData.purchasePurposeTypeName }}
          </span>
        </div>
      </div>

      <div class="download-receipt__line">
        <div class="download-receipt__line--item">
          <p
            class="download-receipt__lable"
            style="width: 149px;"
          >
            联系人
          </p>
          <span
            class="download-receipt__value"
            style="width: 148.5px;"
          >
            {{ cardookReceiptData.contactsName }}
          </span>
        </div>
        <div class="download-receipt__line--item">
          <p
            class="download-receipt__lable"
            style="border-left: 1px solid #000;width: 149px;"
          >
            联系电话
          </p>
          <span
            class="download-receipt__value"
            style="width: 148.5px;"
          >
            {{ cardookReceiptData.contactsPhone }}
          </span>
        </div>
      </div>

      <div class="download-receipt__line">
        <p
          class="download-receipt__lable"
          style="width: 149px;"
        >
          收货地址
        </p>
        <div
          style="width: 448px;height: auto;word-break: break-all;display: flex;align-items: center;justify-content: flex-start;padding: 10px;"
        >
          {{ cardookReceiptData.address }}
        </div>
      </div>

      <div
        class="download-receipt__line"
        style="border-bottom: 1px solid #000;height: auto;"
      >
        <p
          class="download-receipt__lable"
          style="width: 149px;display: flex;align-items: center;justify-content: flex-start;"
        >
          单据编号
        </p>
        <div
          style="width: 448px;height: auto;word-break: break-all;display: flex;align-items: center;justify-content: flex-start;padding: 10px;"
        >
          {{ cardookReceiptData.jiCaiSysNo }}
        </div>
      </div>

      <h3>卡册信息</h3>

      <div class="download-receipt__table">
        <div class="download-receipt__table--head">
          <p
            class="download-receipt__table--item"
          >
            卡册名称
          </p>
          <p
            class="download-receipt__table--item"
          >
            价位
          </p>
          <p
            class="download-receipt__table--item"
          >
            折扣
          </p>
          <p
            class="download-receipt__table--item"
          >
            数量
          </p>
          <p
            class="download-receipt__table--item"
          >
            合计金额
          </p>
          <p
            class="download-receipt__table--item  download-receipt__table--item__last"
          >
            卡册号段
          </p>
        </div>
        <div
          v-for="(applyCard, index) in applyCardItems"
          :key="index"
          class="download-receipt__table--body"
        >
          <p
            class="download-receipt__table--item"
            style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
          >
            {{ applyCard.cardName }}
          </p>
          <p
            class="download-receipt__table--item"
            style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
          >
            {{ applyCard.cardPrice }}
          </p>
          <p
            class="download-receipt__table--item"
            style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
          >
            {{ applyCard.discount }}
          </p>
          <p
            class="download-receipt__table--item"
            style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
          >
            {{ applyCard.quantity }}
          </p>
          <p
            class="download-receipt__table--item"
            style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
          >
            {{ applyCard.totalAmount }}
          </p>
          <p
            class="download-receipt__table--item download-receipt__table--item__last"
            style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
          >
            {{ applyCard.cardNumberSegment }}
          </p>
        </div>
      </div>
      <div
        class="download-receipt__line"
        style="border-bottom: 1px solid #000;height: auto;border-top: none;"
      >
        <p
          class="download-receipt__lable"
          style="width: 158px;display: flex;align-items: center;justify-content: flex-start;"
        >
          总金额（数字）
        </p>
        <div
          style="width: 441px;height: auto;word-break: break-all;display: flex;align-items: center;justify-content: flex-start;padding: 10px;"
        >
          {{ cardookReceiptData.totalAmount }}
        </div>
      </div>
      <div
        class="download-receipt__line"
        style="border-bottom: 1px solid #000;height: auto;border-top: none;"
      >
        <p
          class="download-receipt__lable"
          style="width: 158px;display: flex;align-items: center;justify-content: flex-start;"
        >
          总金额（大写）
        </p>
        <div
          style="width: 441px;height: auto;word-break: break-all;display: flex;align-items: center;justify-content: flex-start;padding: 10px;"
        >
          {{ cardookReceiptData.totalAmountByChinese }}
        </div>
      </div>

      <h3>注意事项</h3>
      <h5 class="download-receipt__tips">
        领用人需承诺将领用的卡册如数安全交付给客户，一旦领用，后期如出现任何问题，由领用者个人承担责任。
      </h5>
      <div
        class="download-receipt__line"
        style="border-bottom: 1px solid #000;"
      >
        <div class="download-receipt__line--item">
          <p class="download-receipt__lable">
            领用人签字
          </p>
          <span class="download-receipt__value" />
        </div>
        <div class="download-receipt__line--item">
          <p
            class="download-receipt__lable"
            style="border-left: 1px solid #000;"
          >
            收货人签字
          </p>
          <span class="download-receipt__value" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch, Provide } from 'vue-property-decorator'
import { fetchContractDetail } from '@/api/cardBookOnline'

@Component({
  name: 'downloadreceipt'
})
export default class extends Vue {
  @Prop({ default: 0 }) private cardBookSysNo!: number
  private cardookReceiptData: any = {}

  get applyCardItems() {
    return this.cardookReceiptData.applyCardItems || []
  }

  private async created() {
    const { id } = this.$route.query
    const res = await fetchContractDetail({ cardApplySysNo: Number(id) })
    this.cardookReceiptData = res.data.data || {}
  }
  // 打印前把原本的body页面保留下来，等打印后再重新复值过去，打印的内容去#print的innerHTML，虽然打印之后把body的内容还原了，但是页面的点击事件都无效了，需要刷新页面还原；
  private print() {
    const print: any = document.getElementById('print') || {}
    const bdhtml = window.document.body.innerHTML
    const printHtml = print.innerHTML
    window.document.body.innerHTML = printHtml
    window.print()
    window.document.body.innerHTML = bdhtml
    window.location.reload()
  }
  private goBack() {
    this.$router.back()
  }
}
</script>
<style>
  p {
    margin: 0;
    padding: 0;
  }

  .el-dialog {
    width: 680px;
  }
  .download-receipt__content {
    width: 600px;
    margin: 0 auto;
  }
  .download-receipt__print {
    margin: 10px;
  }

  .download-receipt__line {
    width: 600px;
    display: flex;
    height: 50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
  }
  .download-receipt__line--item {
    display: flex;
  }
  .download-receipt__lable {
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #000;
    width: 150px;
    line-height: 50px;
    background: #dfe6ec;
    padding: 0 10px;
    border-right: 1px solid #000;
  }
  .download-receipt__value {
    width: 150px;
    line-height: 50px;
    padding: 0 10px;
  }
  .download-receipt__table {
    width: 600px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
  }
  .download-receipt__table--head {
    display: flex;
  }
  .download-receipt__table--body {
    display: flex;
  }
  .download-receipt__table--item {
    width: 79px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-all;
  }
  .download-receipt__table--head .download-receipt__table--item {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    font-weight: 600;
  }
  .download-receipt__table--item__last {
    padding: 5px;
    width: 204px;
  }
  .download-receipt__title {
    width: 600px;
    text-align: center;
  }
  .download-receipt__tips {
    width: 600px;
    word-wrap: break-word;
  }
</style>

局部打印的功能虽然实现了，但是打印的时候会出现打印两页的情况，第二页是一个空白页；
在这里插入图片描述

一直找不到原因，查阅了很多资料，说是如果打印元素的第一个子元素是h1~h5标签会出现打印两页，第二页空白的情况，然后就对现在的代码进行了一些修改，在#print元素里加了一个div包裹里面的子元素，又把第一个h2元素换成了div；

修改后的代码

<template>
  <div
    class="download-receipt"
  >
    <el-button
      class="download-receipt__print"
      type="primary"
      size="mini"
      @click="goBack"
    >
      返回
    </el-button>
    <el-button
      class="download-receipt__print"
      type="primary"
      size="mini"
      @click="print"
    >
      打印签收单
    </el-button>
    <div 
      id="print"
      class="download-receipt__content" 
    >
      <div id="print_body">
        <div class="download-receipt__title">
          卡册领用签收单
        </div>
        <h3>基础信息</h3>
        <div
          class="download-receipt__line"
          style="height: auto;"
        >
          <p
            class="download-receipt__lable download-receipt__flex"
            style="width: 149px;"
          >
            申请单编号
          </p>
          <div
            class="download-receipt__flex download-receipt__break"
            style="width: 448px;"
          >
            {{ cardookReceiptData.sysNo }}
          </div>
        </div>
        <div
          class="download-receipt__line"
          style="height: auto;"
        >
          <p
            class="download-receipt__lable download-receipt__flex"
            style="width: 149px;"
          >
            客户名称
          </p>
          <div
            class="download-receipt__break"
            style="width: 448px;"
          >
            {{ cardookReceiptData.bigCustomerName }}
          </div>
        </div>

        <div class="download-receipt__line">
          <div class="download-receipt__line--item">
            <p
              class="download-receipt__lable"
              style="width: 149px;"
            >
              申请日期
            </p>
            <span
              class="download-receipt__value"
              style="width: 148.5px;"
            >
              {{ cardookReceiptData.applyDate }}
            </span>
          </div>
          <div class="download-receipt__line--item">
            <p
              class="download-receipt__lable"
              style="border-left: 1px solid #000;width: 149px;"
            >
              购买用途
            </p>
            <span
              class="download-receipt__value"
              style="width: 148.5px;"
            >
              {{ cardookReceiptData.purchasePurposeTypeName }}
            </span>
          </div>
        </div>

        <div class="download-receipt__line">
          <div class="download-receipt__line--item">
            <p
              class="download-receipt__lable"
              style="width: 149px;"
            >
              联系人
            </p>
            <span
              class="download-receipt__value"
              style="width: 148.5px;"
            >
              {{ cardookReceiptData.contactsName }}
            </span>
          </div>
          <div class="download-receipt__line--item">
            <p
              class="download-receipt__lable"
              style="border-left: 1px solid #000;width: 149px;"
            >
              联系电话
            </p>
            <span
              class="download-receipt__value"
              style="width: 148.5px;"
            >
              {{ cardookReceiptData.contactsPhone }}
            </span>
          </div>
        </div>

        <div class="download-receipt__line">
          <p
            class="download-receipt__lable"
            style="width: 149px;"
          >
            收货地址
          </p>
          <div
            class="download-receipt__flex download-receipt__break"
            style="width: 448px;"
          >
            {{ cardookReceiptData.address }}
          </div>
        </div>

        <div
          class="download-receipt__line"
          style="border-bottom: 1px solid #000;height: auto;"
        >
          <p
            class="download-receipt__lable download-receipt__flex"
            style="width: 149px;"
          >
            单据编号
          </p>
          <div
            class="download-receipt__flex download-receipt__break"
            style="width: 448px;"
          >
            {{ cardookReceiptData.jiCaiSysNo }}
          </div>
        </div>

        <h3>卡册信息</h3>

        <div class="download-receipt__table">
          <div class="download-receipt__table--head">
            <p
              class="download-receipt__table--item"
            >
              卡册名称
            </p>
            <p
              class="download-receipt__table--item"
            >
              价位
            </p>
            <p
              class="download-receipt__table--item"
            >
              折扣
            </p>
            <p
              class="download-receipt__table--item"
            >
              数量
            </p>
            <p
              class="download-receipt__table--item"
            >
              合计金额
            </p>
            <p
              class="download-receipt__table--item  download-receipt__table--item__last"
            >
              卡册号段
            </p>
          </div>
          <div
            v-for="(applyCard, index) in applyCardItems"
            :key="index"
            class="download-receipt__table--body"
          >
            <p
              class="download-receipt__table--item"
              style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
            >
              {{ applyCard.cardName }}
            </p>
            <p
              class="download-receipt__table--item"
              style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
            >
              {{ applyCard.cardPrice }}
            </p>
            <p
              class="download-receipt__table--item"
              style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
            >
              {{ applyCard.discount }}
            </p>
            <p
              class="download-receipt__table--item"
              style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
            >
              {{ applyCard.quantity }}
            </p>
            <p
              class="download-receipt__table--item"
              style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
            >
              {{ applyCard.totalAmount }}
            </p>
            <p
              class="download-receipt__table--item download-receipt__table--item__last"
              style="border-right: 1px solid #000;border-bottom: 1px solid #000;"
            >
              {{ applyCard.cardNumberSegment }}
            </p>
          </div>
        </div>
        <div
          class="download-receipt__line"
          style="border-bottom: 1px solid #000;height: auto;border-top: none;"
        >
          <p
            class="download-receipt__lable download-receipt__flex"
            style="width: 158px;"
          >
            总金额（数字）
          </p>
          <div
            class="download-receipt__flex download-receipt__break"
            style="width: 441px;"
          >
            {{ cardookReceiptData.totalAmount }}
          </div>
        </div>
        <div
          class="download-receipt__line"
          style="border-bottom: 1px solid #000;height: auto;border-top: none;"
        >
          <p
            class="download-receipt__lable download-receipt__flex"
            style="width: 158px;"
          >
            总金额（大写）
          </p>
          <div
            class="download-receipt__flex download-receipt__break"
            style="width: 441px;"
          >
            {{ cardookReceiptData.totalAmountByChinese }}
          </div>
        </div>

        <h3>注意事项</h3>
        <h5 class="download-receipt__tips">
          领用人需承诺将领用的卡册如数安全交付给客户，一旦领用，后期如出现任何问题，由领用者个人承担责任。
        </h5>
        <div
          class="download-receipt__line"
          style="border-bottom: 1px solid #000;"
        >
          <div class="download-receipt__line--item">
            <p class="download-receipt__lable">
              领用人签字
            </p>
            <span class="download-receipt__value" />
          </div>
          <div class="download-receipt__line--item">
            <p
              class="download-receipt__lable"
              style="border-left: 1px solid #000;"
            >
              收货人签字
            </p>
            <span class="download-receipt__value" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch, Provide } from 'vue-property-decorator'
import { fetchContractDetail } from '@/api/cardBookOnline'

@Component({
  name: 'downloadreceipt'
})
export default class extends Vue {
  @Prop({ default: 0 }) private cardBookSysNo!: number
  private cardookReceiptData: any = {}

  get applyCardItems() {
    return this.cardookReceiptData.applyCardItems || []
  }

  private async created() {
    const { id } = this.$route.query
    const res = await fetchContractDetail({ cardApplySysNo: Number(id) })
    this.cardookReceiptData = res.data.data || {}
  }

  private print() {
    const print: any = document.getElementById('print') || {}
    const bdhtml = window.document.body.innerHTML
    const printHtml = print.innerHTML
    window.document.body.innerHTML = printHtml
    window.print()
    window.document.body.innerHTML = bdhtml
    window.location.reload()
  }
  private goBack() {
    this.$router.back()
  }
}
</script>
<style>
  p {
    margin: 0;
    padding: 0;
  }

  .el-dialog {
    width: 680px;
  }
  .download-receipt__content {
    width: 600px;
    margin: 0 auto;
  }
  .download-receipt__print {
    margin: 10px;
  }

  .download-receipt__line {
    width: 600px;
    display: flex;
    height: 50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
  }
  .download-receipt__line--item {
    display: flex;
  }
  .download-receipt__lable {
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #000;
    width: 150px;
    line-height: 50px;
    background: #dfe6ec;
    padding: 0 10px;
    border-right: 1px solid #000;
  }
  .download-receipt__flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .download-receipt__break {
    height: auto;
    word-break: break-all;
    padding: 10px;
  }
  .download-receipt__value {
    width: 150px;
    line-height: 50px;
    padding: 0 10px;
  }
  .download-receipt__table {
    width: 600px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
  }
  .download-receipt__table--head {
    display: flex;
  }
  .download-receipt__table--body {
    display: flex;
  }
  .download-receipt__table--item {
    width: 79px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-all;
  }
  .download-receipt__table--head .download-receipt__table--item {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    font-weight: 600;
  }
  .download-receipt__table--item__last {
    padding: 5px;
    width: 204px;
  }
  .download-receipt__title {
    width: 600px;
    font-size: 30px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
  }
  .download-receipt__tips {
    width: 600px;
    word-wrap: break-word;
  }
</style>

实现的效果：
在这里插入图片描述
这样问题就解决了；

陶白白～
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
莱鸟介绍window.print()方法
11-23
print()方法的定义和用法: 此方法可以产生一个打印设置界面，此界面与右击窗口，然后点击打印选项产生的界面一样。 语法结构: window.print() 浏览器支持: 1.IE浏览器支持此属性。 2.Firefox浏览器支持此属性。 3.Opera浏览器支持此属性。 4.chrome浏览器支持此属性。 代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>window.print()函数</
window.print() 前端实现网页打印详解
热门推荐
越努力，越幸运！
12-02 6万+
前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。 一、print()方法 print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand('print') 也可以达到同...
【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）
最新发布
06-10 1万+
【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）
一文弄懂window.print（）打印
学习 记录 总结 分享
04-04 9920
一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。浏览器原生 API window.print() 可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。
window.print() 前端页面打印与预览PDF
小先生编程
08-31 1万+
window.print()打印是浏览器自带的打印，实现原理是将html转换为pdf可以在线预览打印或者导出pdf，在任何网页上可通过Ctil+p快捷键调出浏览器打印程序，它可将整个网页打印出来，在我们开发中，其实并不需要将所有页面打印出来，或者只需要局部的页面做打印，那我我们就自己实现window.print（）打印功能。 浏览器自带的打印窗口（页眉页脚属于自带的，我们无法去掉，但是可以通过css将边距调小，将其覆盖掉） 打印常见的功能与问题处理 打印的功能以及布局全由css控制，在加上一些程序处理的业
window.print打印指定div实例代码
09-04
`window.print()` 是JavaScript中的一个方法，它用于打开浏览器的打印对话框，从而让用户选择打印当前网页。但是，这个方法默认会打印整个页面，包括用户可能不希望打印的导航、侧边栏或者其他元素。在这种情况下，...
js window.print实现打印特定控件或内容
10-26
总结起来，通过将要打印的内容放入单独的div并利用JavaScript的`window.print()`方法，我们可以实现只打印网页特定控件或内容的需求。这种方法在处理复杂网页或需要精细化控制打印内容的场景下非常有用。
web打印 window.print()介绍
09-05
本文将详细介绍如何使用`window.print()` 实现Web打印，并提供示例代码帮助理解。 1. **`window.print()` 的工作原理** `window.print()` 是JavaScript的内置函数，调用这个函数会立即打开浏览器的打印对话框，...
javascript实现window.print()去除页眉页脚
10-24
在JavaScript中，`window.print()`方法是一个非常实用的功能，它允许用户直接从浏览器打印网页内容。然而，默认情况下，打印操作可能会包含页眉和页脚，这些元素可能包含URL、日期或者页码等信息，有时并不符合我们...
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能
10-23
在网页开发中，有时我们...通过这个项目，你可以更直观地了解如何结合`window.print()`、背景图片和二维码生成来实现打印功能。在实际应用中，可能还需要根据具体需求进行调整，比如适应不同屏幕尺寸、优化打印布局等。
详解window.print()，实现长列表打印分页
chenlim87的博客
09-22 4078
其实我们只要控制打印的行数就可以了。我们需要知道打印元素的高度和表格行的高度，算出一页纸可以打印多少行，超出的部分放到下一页打印。4、-webkit-print-color-adjust：是一个在浏览器中强制打印背景颜色和字体颜色的css属性，当打印出来的某些元素的背景颜色没有被显示时，可以使用。我们页面的样式和打印页面时的样式是两个不同的样式，打印时会默认携带页面的样式，同时呢我们也可以修改页面打印时的样式。1、先获取指定容器中的内容，将body的内容替换掉，调用了打印方法后，再把原来的body恢复。
window.print局部打印
ydZ157的博客
09-03 630
window.print局部打印
浏览器调用print实现部分打印的两种方法
软践的专栏
02-03 301
替换body的内容为要打印的内容，然后再从新刷新页面 const old = window.document.body.innerHTML //备份原来的页面 window.document.body.innerHTML = '' window.document.body.appendChild(/* 将你要打印的内容附加到这 */) window.print() //调用print()函数时，会跳出打印预览的界面，如下的代码被阻塞，关闭预览界面后继续执行 window.document.b
JavaScript 实现打印操作
weixin_38168139的博客
08-30 1155
一.打印当前页面指定元素中的内容 方式一：直接使用window.print(); （1）首先获得元素的html内容（这里建议如果有样式最好是用内联样式的方式） var newstr = document.getElementById(myDiv).innerHTML;//得到需要打印的元素HTML （2）保存当前页面的整个html，因为window.print()打印操作是打...
前端 window.print() 打印方案、优化策略总结
m0_64435826的博客
04-16 2539
网页打印的功能在一些 ims 系统中已经很常见，上面这几个优化方案都是最近遇到后临时研究后的成果，已经满足我们的项目需求，可能还有不足之处，仅可供参考。
vue前端调用 window.print()打印指定区域
qq_44997933的博客
06-01 1954
方法二：把打印内容嵌入到iframe页面，调用打印弹窗。方法一：直接调用打印页面弹窗。方法三：打开新页面打印。
window.print()局部打印代码实现
03-30
局部打印可以通过CSS的@media打印样式来实现，具体代码如下： HTML: ```html <div id="print-area"> <h1>Print Area</h1> <p>This is the area to be printed.</p> </div> <button id="print-button">Print</button> ``` CSS: ```css @media print { body * { visibility: hidden; } #print-area, #print-area * { visibility: visible; } #print-area { position: absolute; left: 0; top: 0; } } ``` JavaScript: ```javascript var printButton = document.getElementById("print-button"); var printArea = document.getElementById("print-area"); printButton.addEventListener("click", function() { window.print(); }); ``` 以上代码会将整个页面隐藏，只显示id为"print-area"的部分，并且该部分会被放置在页面的左上角，然后通过JavaScript代码实现点击按钮进行打印。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值