前端自选区域打印，解决iframe不显示样式

最新推荐文章于 2024-03-14 18:55:22 发布
最新推荐文章于 2024-03-14 18:55:22 发布
阅读量3.2k 收藏 4
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cypersonal/article/details/105970116
版权

1、选定区域

<!--开始-->
<!--startprint-->
。。。内容。。。
<!--endprint-->
<!--结束-->

打印按钮<button onclick="doPrint1()">打印</button>

function doPrint1() {
	    var bodyhtml=window.document.body.innerHTML;   //获取页面html
	    var startprint="<!--startprint-->";   
	   var  endprint="<!--endprint-->";   
	    var printhtml=bodyhtml.substr(bodyhtml.indexOf(startprint)+17);   
	    printhtml=printhtml.substring(0,printhtml.indexOf(endprint));   //截取要打印的html
	    
	    var iframe = document.createElement('IFRAME');//创建iframe
	    iframe.setAttribute('style', 'display:none;');//隐藏iframe（无感打印区域）
	    var doc = null;
	    document.body.appendChild(iframe);
	    doc = iframe.contentWindow.document;
	    //引入css文件，同时插入我们截取的需要打印的html
	    doc.write('<html><head><link rel="stylesheet" href="/css/dayin.css?ts=20200507" media="all"></head><body style="zoom: 60%;">'+printhtml+'</body></html>');
	    doc.close();
	    iframe.contentWindow.focus();
	    iframe.contentWindow.print();//打印
	    document.body.removeChild(iframe);//删除iframe
	}

注： 解决iframe中内容css丢失的解决方案是将打印区域所需要的css放入一个css文件中，在iframe中引用文件即可
问题1：浏览器最小字体为12号，如果打印快递单子的话字会太大
解决方案：在doc.write('<html><head><link rel="stylesheet" href="/css/dayin.css?ts=20200507" media="all"></head><<body style="zoom: 60%;">'+printhtml+'</body></html>');中 设这body的缩放比例，利用缩放实现小型快递单子的打印效果。<body style="zoom: 60%;">缩放60%。

cypersonal
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何修改iframe种的样式_word样式管理：如何对样式进行修改删除
weixin_39949607的博客
12-06 635
在前面的图文中简单为大家介绍了Word文本样式和表格样式的创建技巧。但对于已经创建好的样式，有时会对样式中的格式进行再次修改；或者是当拿到某个Word文档，它的样式经历多次或多人不断修改，可能导致样式库中的样式混乱不堪，为便于编辑，可将其隐藏或删除。因此，今天小编就给大家介绍如何管理样式，解决大家的困扰，希望对大家有所帮助！一、了解“样式”窗格管理样式，必然少不了用“样式”窗格。因为样式的大多数操...
前端自选打印
xyqseven的博客
07-03 122
安装 npm install vue-print-nb --save 在main.js文件中注册 import Print from ‘vue-print-nb’ Vue.use(Print) <vi-button type=“primary” v-print="’#printPreview’" @click=“clickPrint”>打印 //打印下面div的内容 ...
vue 打印局部dom，支持样式 iframe 打印 解决图片丢失问题
qq_36328170的博客
05-20 2355
vue 打印局部dom 支持样式 iframe 打印 解决图片丢失问题 直接撸代码 print(){ var el = document.getElementsByClassName("detail-content"); console.log(el); var iframe = document.createElement('IFRAME'); var doc = null; iframe.setAttribute('style', 'p
JS利用iframe 局部打印(带样式）
Charming_flower的博客
03-14 281
【代码】JS利用iframe 局部打印(带样式）
jquery + iframe 实现打印功能
前端开发工程师
06-16 2103
使用 window.print() 和 iframe.print() 实现html自定义页面打印功能,可自定义申请单、签呈单等，但是页面表格排版和样式需要自己写
如何修改iframe内的页面的元素的样式
04-25 6803
如何修改iframe内的页面的元素的样式 window.onload = function(){ var _iframe = document.getElementById('iframe').contentWindow.document.getElementById('license_title') //get iframe下的id _iframe.style.di...
iframe 嵌套外部地址导致外部页面中的echart样式失效
周家大小姐
02-23 688
注:echart在iframe中使用不可以作百分号为单位不然样式会失效。我这里是跨域的还是两个项目。
JavaWeb企业实训 简易股市自选查询分析系统(三)前端页面加入highchart及CSS3列表
珍惜时间
04-16 1067
目录结构： 界面效果： index.jsp <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> ">
使用jQuery不判断浏览器高度解决iframe自适应高度问题
12-11
iframe的代码中，注意要写ID，没有ID查找不到 代码如下: <iframe src=”test.html” id=”main” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe> 方法一： 代码如下:...
VB自选打印机打印.txt
03-23
能够通过数据库字段内打印机的名称进行选择打印机进行打印的vb程序源代码。在电脑连接多台打印机时，可以自己进行选择打印机进行打印。打印机名称存储在数据库中，通过读取数据库字段内的打印机名称就可以选择并进行...
自选食堂智慧化解决方案共26页.pptx
04-09
自选食堂智慧化解决方案共26页.pptx
三种标签云前端效果自选.zip
08-25
使用html做的前端标签云，三种效果，效果展示：https://blog.csdn.net/qq_43925089/article/details/108213820
基于多种编程语言的卡拉音乐播放器设计源码
05-28
本项目是基于多种编程语言的卡拉音乐播放器设计源码，包含625个文件，其中包括389个JavaScript文件、70个TypeScript文件、52个PNG图像文件、22个JSON配置文件、19个Vue文件、12个MAP文件、11个WXSS样式文件、9个WXML模板文件、7个SVG文件和5个EOT字体文件。系统专注于提供卡拉音乐播放器功能，支持歌曲播放、播放列表管理等功能，为用户提供了一个稳定、高效的卡拉音乐播放器。
QTabWidget实现的炫酷标签工具栏+源码
05-28
qt 用法链接：https://menghui666.blog.csdn.net/article/details/139276655?spm=1001.2014.3001.5502 该项目基于QTabWidget和QTabBar实现了灵活的标签工具栏，主要包含如下功能： 1、标签栏可以收起，可以展开 2、可以在标签栏中添加新的标签界面 3、可以从标签工具栏中把界面拖出来，也可以拖回去 4、关闭拖出来的界面会自动回到标签工具栏 5、可以调换标签工具栏中界面的顺序
VB学生公寓管理系统(源代码+论文).rar
05-28
计算机专业毕业设计VB精品论文资源
基于springboot的高校心理教育辅导管理系统
05-28
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我v:19306446185 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ https://img-blog.csdnimg.cn/direct/e73dc0ac8d27434b86d886db5a438c71.jpeg
debugpy-1.0.0b1-cp34-cp34m-manylinux1_x86_64.whl
05-28
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
grpcio-1.57.0-cp37-cp37m-manylinux_2_17_aarch64.whl
最新发布
05-28
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
前端自选字段导出代码演示
03-25
A：以下是一个前端自选字段导出 Excel 表格的代码演示： 首先，需要在前端定义需要导出的字段和数据，并将其传递给后端： ``` // 前端定义需要导出的字段和数据 const fields = ['name', 'age', 'gender']; const data = [ { name: 'Alice', age: 25, gender: 'female' }, { name: 'Bob', age: 30, gender: 'male' }, { name: 'Charlie', age: 35, gender: 'male' }, ]; // 将字段和数据传递给后端 axios.post('/export', { fields, data }); ``` 后端接收到前端传递的数据后，使用 ExcelJS 库生成 Excel 文件，并将其返回给前端： ``` const ExcelJS = require('exceljs'); // 处理前端传递的数据 app.post('/export', (req, res) => { const { fields, data } = req.body; // 创建 Excel 文件 const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Sheet1'); // 添加表头 fields.forEach((field, index) => { worksheet.getCell(`A${index + 1}`).value = field; }); // 添加数据 data.forEach((row, rowIndex) => { fields.forEach((field, columnIndex) => { worksheet.getCell(`${String.fromCharCode(66 + columnIndex)}${rowIndex + 2}`).value = row[field]; }); }); // 生成 Excel 文件并返回给前端 workbook.xlsx.write(res).then(() => { res.status(200).end(); }); }); ``` 前端接收到后端返回的 Excel 文件后，通过 Blob 和 FileSaver.js 库实现文件下载： ``` // 前端处理后端返回的 Excel 文件并进行下载 axios({ url: '/export', method: 'POST', responseType: 'blob', data: { fields, data }, }).then((response) => { const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); saveAs(blob, 'data.xlsx'); }); ``` 以上代码可以实现一个简单的前端自选字段导出 Excel 表格的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值