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打印指定div实例代码
09-04
`window.print()` 是JavaScript中的一个方法，它用于打开浏览器的打印对话框，从而让用户选择打印当前网页。但是，这个方法默认会打印整个页面，包括用户可能不希望打印的导航、侧边栏或者其他元素。在这种情况下，...
javascript实现window.print()去除页眉页脚
10-24
在JavaScript中，`window.print()`方法是一个非常实用的功能，它允许用户直接从浏览器打印网页内容。然而，默认情况下，打印操作可能会包含页眉和页脚，这些元素可能包含URL、日期或者页码等信息，有时并不符合我们...
一文弄懂window.print（）打印
学习 记录 总结 分享
04-04 9788
一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 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() 前端实现网页打印详细教程（含代码示例）
最新发布
06-10 1万+
【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）
window.print局部打印
ydZ157的博客
09-03 629
window.print局部打印
前端页面window.print()实现局部打印
浮游的博客
08-01 1168
近期在做一个需要局部打印页面考试成绩的功能，总体来说有两个思路： dom替换 新窗口打印 dom替换会导致事件失效，如果重新加载的话又会影响到体验；而新窗口缺因为样式问题也不好解决，都不满足项目的需求，于是把自己的方法贴上来： <template> <div id="printcontent"> //给需要打印的区域一个id <div @click="report">打印考试结果</div> </div> </t
打印屏蔽部分内容window.print()
小贝de
07-20 674
var bdhtml=window.document.body.innerHTML; var sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符 var eprnstr="<!--endprint-->"; //结束打印标识字符串 var prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容 prnhtml=prnhtml.substring(0,prnh.
js window.print实现打印特定控件或内容
10-26
总结起来，通过将要打印的内容放入单独的div并利用JavaScript的`window.print()`方法，我们可以实现只打印网页特定控件或内容的需求。这种方法在处理复杂网页或需要精细化控制打印内容的场景下非常有用。
web打印 window.print()介绍
09-05
本文将详细介绍如何使用`window.print()` 实现Web打印，并提供示例代码帮助理解。 1. **`window.print()` 的工作原理** `window.print()` 是JavaScript的内置函数，调用这个函数会立即打开浏览器的打印对话框，...
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能
10-23
在网页开发中，有时我们...通过这个项目，你可以更直观地了解如何结合`window.print()`、背景图片和二维码生成来实现打印功能。在实际应用中，可能还需要根据具体需求进行调整，比如适应不同屏幕尺寸、优化打印布局等。
网页打印和打印局部页面
01-03
网页 调用 打印 打印局部
window.print打印指定div指定网页指定区域的方法
09-04
主要介绍了window.print打印指定div指定网页指定区域的方法,需要的朋友可以参考下
打印功能window.print()
GTbond的博客
01-05 5461
打印功能window.print() 1. window.print()打印其实打印的是整个当前网页 2. 3. 样式问题 如果使用less,scss 是不会生效的 只能使用css语言格式, 就是不能像less、scss嵌套写 //在style中，使用@media print{} //不要嵌套写 @media print { div{ font-size:12px; ··· } ··· } 背景颜色可能不会生效，字体颜色生效了 ...
使用window.print()方法分页打印
别了_不想说的博客
03-27 9073
使用window.print()方法分页打印只需要在每页中增加以下样式属性style="page-break-after:always"例如<div style="page-break-after:always"> 第一页内容 </div> <div style="page-break-after:always"> 第二页内容 </div>page-break-after属性讲解 http:
jQuery打印Html页面自动分页
weixin_34221276的博客
06-26 762
最近项目中需要用到打印HTML页面，需要指定区域打印，使用jquery.PrintArea.js 插件 用法：  Javascript代码   $("div#printmain").printArea();   但还是会打印DIV后面的内容，这里可以使用CSS控制打印分页  Css代码   &lt;div style="pa...
window.print打印指定区域
hgg923的专栏
06-11 1896
doPrint() { // let originHtml = window.document.body.innerHTML; //需要打印的元素 let printHtml = document.getElementById("printDiv").innerHTML; console.log(printHtml); window.document.body.innerHTML = printHtml; window.print(); // 方式.
window.print打印指定div
weixin_34033624的博客
11-18 250
window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢？ 首先我们可以把要打印的内容放在div中，然后用下面的代码进行打印。 <html> <head> <scriptlanguage="javascript"> function printdiv(printpage) { var he...
window.print()打印指定页面内容
Megamind_HL的博客
04-17 3785
在做开发中，我们可能会遇到实现打印的功能，下面给出HTML DOM print() 方法 bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="&lt;!--startprint"+oper+"--&gt;";//在页面设置打印开始区域 eprnstr="&lt;!--endprint"+oper+"--&gt...
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、付费专栏及课程。

余额充值