首页 > 其他分享 >js 自定义打印,不打开新窗口

js 自定义打印,不打开新窗口

时间:2022-11-10 11:37:54浏览次数:50  
标签:printIframeWindow const option 自定义 js printIframe 新窗口 oldPrintIframe document

function customPrint(content, option = {}) {
const removeOldIframe = () => {
const oldPrintIframe = document.getElementById('printIframe');
oldPrintIframe && oldPrintIframe.remove && oldPrintIframe.remove();
}
removeOldIframe();
const printIframe = document.createElement('iframe');
printIframe.id = 'printIframe';
document.body.appendChild(printIframe);
const printIframeWindow = printIframe.contentWindow;
printIframeWindow.document.title = option.title || "";
printIframeWindow.document.write(content);
printIframeWindow.addEventListener('beforeprint', () => {
option.beforePrint && option.beforePrint(printIframe);
})
printIframeWindow.addEventListener('afterprint', () => {
option.afterPrint && option.afterPrint(printIframe);
removeOldIframe();
})
setTimeout(() => {
printIframeWindow.focus();
printIframeWindow.print();
})
}

 

调用方法customPrint(res.data);

标签:printIframeWindow,const,option,自定义,js,printIframe,新窗口,oldPrintIframe,document
From: https://www.cnblogs.com/Agreoself/p/16876502.html

相关文章

  • 自定义 Spring Authorization Server 配置
    SpringOAuthorizationServer自定义配置非常重要,后面的所有定制配置都是基于此。本文先介绍OAuth2AuthorizationServerConfigurer提供的配置选项,并使用ProviderSett......
  • js的时间比较
    time1的传参数类型是“2022-11-1023:23:20”点击查看代码functiontimes(time1){letnow=newDate()//当前时间letend=newDate(time1.replac......
  • 微信小程序[ app.json 文件内容错误] app.json: app.json 未找到解决方法
      导入项目后project.config.json文件被微信开发者工具修改,缺少代码:“miniprogramRoot”:"./dist"向project.config.json文件中添加如下代码“miniprogramRoot”:......
  • JSON
         ......
  • 手写一个JS函数,实现数组深度扁平化
    要求:把数组arr=[12,34,[122,324],[222,[333]];扁平化思路:创建一个新数组,循环原数组判断每一项是否是数组是的话先递归,在调用const或push方法,不是直接const或push。方法一......
  • 001[Js修炼]手写深拷贝
    /**//编写一个深度克隆函数,满足以下需求(此题考察面较广,注意细节)functiondeepClone(obj){}//deepClone函数测试效果constobjA={name:'jack',birthday:......
  • [Element UI 2.x] el-upload组件的部分事件属性传参在.jsx文件中失效的问题
    在之前的开发工作经历中,基本会首选Antd、ant-design-vue、Vant做为前端工程的UI库。今天在处理一个现有项目时,其UI库使用的是ElementUI(2.15.10)。在以JSX形式编写一个具......
  • 自定义centos
    1修改rootfs.img1.安装工具[root@localhost~]#yuminstall-ysquashfs-tools2.用unsuqashfs命令直接解压缩squashfs.img[root@localhost~]#unsquashfssquashfs.img3......
  • json数据传递参数
    1.类型json数组json对象(POJO)json数组(POJO) 2.接收请求中的json数据的步骤:(1)添加json数据转换相关坐标  (2)  (3)  注意:@EnableWebMvc注解功能强大,该注解整合......
  • js获取字符串中含有某个字符个数
    得到字符串含有某个字符的个数/***获取字符串中某字符的个数*@paramstr字符串*@paramcharchar为某字符*@returnsString*/constgetCharCount=(......