代码编织梦想

1、iframe打印 一定要注意样式,有些大图片打印会空白

2、iframe 设置innerHTML 和打印print 一定要有间隔

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <button onclick="onPrint()"> print</button>
    </div>
    <iframe title="print" id="iframe_print" style="display: none;"></iframe>
    <div id="print_img">
        <img src="https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
    </div>
</body>
<script>
    function onPrint() {
        let iframe_print = document.getElementById('iframe_print')
        doc = iframe_print.contentWindow.document;
        doc.head.innerHTML = '<style>@media print {html,body {height: 100vh; margin: 0 !important;padding: 0 !important}}</style>'
        doc.body.innerHTML = document.getElementById('print_img').innerHTML
        // 定时时间过短会影响iframe渲染,从而导致打印
        setTimeout(() => {
            iframe_print.contentWindow.print()
        }, 1000)
    }
</script>

</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Trifling_/article/details/129412996

echarts 实现省市区下钻_trifling_的博客-爱代码爱编程

最近公司有个项目需要实现省市区下钻,本以为很简单的操作就能实现该功能,没想到遇到各种坑。只有亲自尝试方知其辛酸。 辛酸历程(纯属唠嗑): 第一版:最初LZ基于echarts去实现下钻,发现echarts3.0后就没有相应的区县的地图josn,就去网上各种找地图json,基本都是csdn提供的(下载还要钱o(╥﹏╥)o),后面我有提供免费的下载链接。最初

基于高德地图为底图实现全国、省、地级市下钻_trifling_的博客-爱代码爱编程

目录 简介 效果图 具体实现 注意点 不足点 简介 由于前面通过echarts和百度地图都没能实现理想效果从而只能另寻方案,最终实现方案:全国省采用echarts渲染,单个省、地级市采用高德地图为地图渲染(有人可能会疑问为什么不全部采用高德地图渲染,在上一篇中我有解释到用高德地图渲染全国省时,由于数据量过于太大会导致卡顿) 效果图 全国

js iframe 打印 打印预览 页眉页脚的设立_iteye_3156的博客-爱代码爱编程

js iframe 打印 打印预览 页眉页脚的设置 1、window.print方式:   //jsp页面 打印按钮: <input type="button" value="打印" οnclick="print();"> //js 中: function print(){ window.print(); //style样式中,设

iframe禁用打印功能_lm跳跳兔的博客-爱代码爱编程_禁用iframe的打印

       在项目开发过程中,遇到这样的问题,使用iframe加载pdf,然后,用户选择是否打印,用户选择打印的入口有两个,一个是浏览器的Control + P,还有一个是pdf页面右上角的打印按钮,但是,两个入口的结果完全不一样,其中Control + P打印内容是不正确的,因此,想着禁用Contol + P功能,但就是这么一个简单的功能,花费了一个上

javascript利用iframe打印pdf文档失败的问题-爱代码爱编程

pdf文档不能在QQ浏览器(或者谷歌浏览器)直接打开 利用iframe打印pdf文档可能遇到的问题 利用$("#"+iframe的id)[0].contentWindow.print();打印pdf文档,在谷歌浏览器或者QQ浏览器出现以下错误:Uncaught DOMException: Blocked a frame with origin “htt

react iframe打印pdf文档-爱代码爱编程

先说需求,最近有一个需求 是 后台 把服务器上的文档转成pdf 并打印, 后来发现 java 打印不行,因为我们是一个web服务,所以 在服务器端打印不行,只能用 前端js打印。 我们遇到最大的问题就是 iframe 能显示了,但是 就是 死活不能打印 要么就是跨域问题,要么就是打印的是空白页面。然后看网上分析 各种什么 另一个页面包裹这个iframe 

vue 打印局部dom,支持样式 iframe 打印 解决图片丢失问题-爱代码爱编程

vue 打印局部dom 支持样式 iframe 打印 解决图片丢失问题 直接撸代码 print(){ var el = document.getElementsByClassName("detail-content"); console.log(el); var iframe = document.createE

js实现动态iframe打印功能及下载pdf-爱代码爱编程

需求 1.实现打印功能:     var iframe=document.getElementById("issuedViewIfram"); //页面有个 <iframe style="display: none" id="issuedViewIfram"></iframe>       var el = docume

React使用antd组件 iframe 打印 及 单选框无选中 和 样式问题-爱代码爱编程

// 1. 创建iframe let iframe = document.createElement("IFRAME"); iframe.setAttribute("style","position:absolute;width:0;height:0;left:0;top:0;"); // 2. 获取要打印的内容 const el = documen

iframe打印信息-爱代码爱编程

html页面利用iframe打印信息 html内容js 内容 html内容 <div id="xxx" style="display: none;"><iframe id='printID'><html><head></head><body></body>&l

jquery + iframe 实现打印功能_下一步进阶码农的博客-爱代码爱编程

使用 window.print() 和 iframe.print() 实现html自定义页面打印功能  引入jquery文件:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 使用window.print()打印 <

利用iframe实现局部打印(区域打印)_k6丶的博客-爱代码爱编程

利用iframe实现局部打印(区域打印) <template> <div id="test-page"> <!-- 额外元素 --> <div class="m

js 利用iframe 局部打印html_html局部打印-爱代码爱编程

js 利用iframe 局部打印html goPrint(data) { console.log("触发打印功能"); // 创建iframe let iframe = docum

iframe打印pdf跨域问题,使用blob流转为同源_java blob iframe-爱代码爱编程

<iframe :src="pdfUrl2" width="100%" height="700px" id="printMe" hidden></iframe> <iframe :src="pdfUrl" width="100%" height="700px"></iframe> import axi