J S打印事件

已于 2022-10-07 16:22:09 修改
阅读量252 收藏
点赞数
文章标签： javascript vue.js 前端
于 2022-10-07 16:19:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49210750/article/details/127195625
版权 
<template>
  <div class="layout-container">
    <div style="text-align: left; padding: 15px;">
      <el-button @click="print">打印</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const print = () => {
      let headerStr = `
        <html>
          <head>
            <title></title>
            <style>
              table,table tr th, table tr td { border:1px solid #000; }
              table { width: 100%; min-height: 30px; line-height: 30px; text-align: center; border-collapse: collapse; margin-bottom: 20px;}
            </style>
          </head>
        <body>
      `
      let footerStr = "</body></html>"
      let printData = `
        <h1 style="text-align: center;">采购订单</h1>
        <div style="border-bottom: 1px solid #000; padding-bottom: 20px;">
          <div style="margin-right: 100px; display: inline-block;">订单号 ORD210000229</div>
          <div style="display: inline-block;">订单日期 2021-06-26</div>
        </div>
        <div style="padding: 10px 0;">
          <div style="margin: 10px 0;">
            <div style="display: inline-block; width: 49%;">供应商  其他厂家</div>
            <div style="display: inline-block; width: 49%;">购货方 这是一个名称</div>
          </div>
          <div style="margin: 10px 0;">
            <div style="display: inline-block; width: 49%;">联系方式  123456789</div>
            <div style="display: inline-block; width: 49%;">采购员 张三</div>
          </div>
          <div style="margin: 10px 0;">
            <div style="display: inline-block; width: 49%;">地址 上尚德缓刑枯栽春树暮云花飘万家雪</div>
            <div style="display: inline-block; width: 49%;">购货方 这是一个名称</div>
          </div>
          <div style="margin: 10px 0;">
            <div style="display: inline-block; width: 49%;">供应商  其他厂家</div>
            <div style="display: inline-block; width: 49%;">购货方 这是一个名称</div>
          </div>
        </div>
        <table>
          <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>单位</th>
            <th>数量</th>
            <th>单价</th>
            <th>金额</th>
            <th>零售价</th>
            <th>条码</th>
          </tr>
          <tr>
            <td>082002</td>
            <td>9803 防哂型女士旅行衣</td>
            <td>件</td>
            <td>110.0</td>
            <td>56.00</td>
            <td>6160.00</td>
            <td>148.00</td>
            <td>699902100000011</td>
          </tr>
        </table>
        <table>
          <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>单位</th>
            <th>数量</th>
            <th>单价</th>
            <th>金额</th>
            <th>零售价</th>
            <th>条码</th>
          </tr>
          <tr>
            <td>082002</td>
            <td>9803 防哂型女士旅行衣</td>
            <td>件</td>
            <td>110.0</td>
            <td>56.00</td>
            <td>6160.00</td>
            <td>148.00</td>
            <td>699902100000011</td>
          </tr>
        </table>
        <table>
          <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>单位</th>
            <th>数量</th>
            <th>单价</th>
            <th>金额</th>
            <th>零售价</th>
            <th>条码</th>
          </tr>
          <tr>
            <td>082002</td>
            <td>9803 防哂型女士旅行衣</td>
            <td>件</td>
            <td>110.0</td>
            <td>56.00</td>
            <td>6160.00</td>
            <td>148.00</td>
            <td>699902100000011</td>
          </tr>
        </table>
      `
      let wind = window.open("", "订单详情",
					"toolbar=no,scrollbars=yes,menubar=no")
      wind.document.body.innerHTML = headerStr + printData + footerStr
      wind.print()
      console.log(123)
      wind.close()
    }
    return {
      print
    }
  }
})
</script>

 

 

失落村庄
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js模拟键盘事件-浏览器打印
h13089412013的专栏
01-30 899
模拟键盘事件不是万能的，是浏览器安全策略搞的鬼，那么如此，调用浏览器类似功能时，就去查查是否相应的接口吧，不要妄图模拟了。
js几种打印方法的几种方法
热门推荐
一步一个脚印，踏实努力，向着目标前进
07-19 1万+
根据您的具体需求和使用环境，您可以选择适合您的方法来实现打印功能。希望这些信息对您有所帮助。替换为要打印的元素的实际 ID。您可以打印整个页面，也可以指定要打印的特定元素。在上面的示例中，当用户点击"Print"按钮时，将触发打印操作，打印。在您的 HTML 文件中创建一个按钮，用于触发打印操作。库的 JavaScript 文件和 CSS 文件。希望这些详细的步骤能够帮助您实现打印功能。首先，在您的 HTML 文件中引入。正常工作，您需要确保您的网页在加载。希望这个详细的教程能够帮助您使用。
JS 事件（二）--事件类型
心之所向
09-01 137
JS 事件类型事件类型鼠标右键事件鼠标事件键盘事件表单事件框架/对象（Frame/Object）事件剪贴板事件打印事件拖动事件 事件类型 鼠标右键事件 oncontextmenu 鼠标事件 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上 onmo...
js实现打印
最新发布
abc8002117034的博客
07-11 342
print()方法用于在浏览器中触发打印操作。这个方法通常用于打印当前页面的内容或者特定的元素。以下是如何使用.print()
JavaScript 打印行为监听
神仙别闹的自留地
08-26 1222
var beforePrint = function () { //alert('Functionality to run before printing.'); //开始打印 }; var afterPrint = function () { //alert('Functionality to run after printing'); //结束打印 }; if (window.matchMedia) { var mediaQueryList = window.
js使用window.print()实现打印功能
weixin_45615375的博客
05-23 8991
js使用window.print()来实现打印功能 1.首先在需要打印的内容标签上面绑定ref <div ref="tableRef"> 需要打印的内容 </div> <!--点击按钮打印--> <el-button @click="billPrintClick" >打印</el-button> 2.按钮打印事件 billPrintClick() { let newstr = this.$refs.tableRef.innerHTML /
前端打印只需要一分总可以吧
06-20
6. **错误处理**：当打印过程中遇到问题时，PrintJS会触发一个全局的`printError`事件，开发者可以监听这个事件来处理错误情况。 7. **示例与文档**：PrintJS的官方文档提供了详尽的API参考和示例代码，帮助开发者...
js实现打印，可以自动分页！
01-30
js打印,将数据读取到打印页面，用js截取，从而实现打印指定模块！打印的时候如果页面数据过多，打印机可以自动分页打印！我的是hp的打印机，下载的朋友可以试试！注意，本人声明：这个并不是针对于打印分页而写，...
JS 实现分页打印功能
01-19
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的...
VUE打印demo，自动分页
10-10
在这个“VUE打印demo，自动分页”项目中，我们将会探讨如何在Vue应用中实现打印功能并配合自动分页，这在开发报表或文档展示等场景中非常常见。 首先，让我们了解Vue.js中的组件化开发。Vue应用由多个可复用的组件...
vue中使用vue-print.js实现多页打印
10-15
vue-print.js是一个基于PrintJS的Vue.js插件，可以方便地进行打印和打印预览。但在使用过程中，我们会遇到多页打印只显示一页的问题，这时需要对print.js进行一定的修改，以解决这个问题。接下来，我们将详细介绍...
JS 常见原生事件（PC）
qq_43522419的博客
02-28 539
JS常见事件
js网页打印的4种方式和相关内容
wll_web的博客
03-27 6958
js打印的4种方式和相关内容前言注释方式打印id选择打印 前言 在网页上打印通常都是Ctrl+p，例如百度首页打印预览： 我们有时候在项目中也会使用打印的功能，基本上都是打印网页上的一部分内容，比如某块区域的文章、表格或者标签。总的来说就是自定义需要打印的区域，接下来就让我们一起来看一下吧！ 注释方式打印 html代码： <h1>注释区域外不需要打印的内容</h1> ...
JS - 捕获打印窗口关闭事件
XieJay97的博客
09-07 1574
实际上浏览器没有标准化的打印窗口关闭事件，但是根据js单线程这一特性，我们可以在打开打印窗口时同时执行一个异步函数，这样异步函数将被阻塞直到窗口关闭，通用于任何窗口。
print.js的onPrintDialogClose事件触发失效
ZHU18670324781的博客
06-14 700
今天在项目中遇到了，需要给打印添加loading事件。添加之后出现onPrintDialogClose不触发，当在控制台点击后，再点击页面，才会触发onPrintDialogClose事件，关闭loading。
【Vue】使用print.js插件实现打印预览功能，超简单
weixin_50863323的博客
08-08 1万+
【Vue】使用print.js插件实现打印预览功能，超简单
JS打印页面绑定事件和点击事件
Snowball
12-30 4663
JavaScript打印页面绑定事件和点击事件 JS打印页面绑定事件和点击事件
前端调用浏览器打印判断用户点击确认还是取消
soclear_的博客
10-21 5509
window监听到打印的beforePrint和afterPrint两个事件，但是无论点击打印还是取消都会触发afterPrint事件，所以只能通过这个事件的触发让用户自己判断是否打印成功，以此来记录数据是否打印或者是打印了几次，以下是打印的方法。调用方法后监听iframe的afterPrint事件。
printjs打印echart
06-09
要使用printjs打印echart，需要先将echart图表转换为图片格式。可以使用echarts提供的echarts-gl库中的convertToPixelCanvas方法或者使用html2canvas库将echart图表转换为canvas对象，再将canvas对象转换为图片格式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值