前端使用print，打印页面功能

最近在做一个打印功能，看了很多方法，因为打印的模板需求不同，没有找到好的模板，只是自己根据需求画了一个模板，有好用的模板大家可以推荐下。

一.window.print();

二.iframe

三.npm install --save react-to-print

首先：window.print()

如果是局部打印可以通过 document.getElementById("print")?.innerHTML,获取当前要打印的模块，使用这个方法是最简便的，当前页面没有其他操作可以使用这个方法，如果需要打印的页面有“新增”，“删除”，“编辑”等操作，尽量不要使用这个方法，因为当你使用次方法之后你的页面不能操作，需要重新加载才可以正常使用，这个方法，目前我没有找到其他好的方式来解决这个问题

代码实例：

const handlePrint=()=>{

const oldPage = document.body.innerHTML;//首先保存整个页面

const print=document.getElementById("print")?.innerHTML//当前需要打印的部分

document.body.innerHTML = print;//需要打印的页面

window.print();//打印

document.body.innerHTML = oldPage;//还原打印之前的页面

}

其次：iframe

通过这个方法虽然不会导致原页面操作失效，但是样式容易丢失，放在标签上的样式不会应用，需要自己引进样式，样式根据自己项目引入方式去添加

代码示例：

const handleIframe = () => {
//创建iframe
const iframe = document.createElement('IFRAME');
//获取dom节点（打印的内容）
const jubuData = document.getElementById("pront")?.innerHTML;
let doc = null;
iframe.setAttribute('style', 'position:absolute;width:0;height:0;left:-500px;top:-500px;');
document.body.appendChild(iframe);
document.getElementById("pront")?.innerHTML
doc = iframe.contentWindow.document;
doc.write(jubuData);
doc.close();
iframe.contentWindow.print();
}

最后：npm install --save react-to-print

地址：react-to-print - npm (npmjs.com)

引入方式 import ReactToPrint from "react-to-print";

在这里，我是封装成一个组件，根据不同的类型，打印不同的模板，因为只是打印，需求没有没有那么复杂，使用的api比较少，这个插件的api方法解释的很详细，可以去研究下。

<div>

<ReactToPrint

content={reactToPrintContent}

documentTitle="AwesomeFileName"

removeAfterPrint

trigger={reactToPrintTrigger}

//自定义组件模板PrintComponent，

<PrintComponent

printType={BILL}

dataSource={dataSource}

printData={printData}

tableFooter={tableFooter}

tableHeader={tableHeader}

ref={setComponentRef}

</div>

//方法可以直接在api的例子拷贝一份

let componentRef: any = null;

const reactToPrintContent = () => {

return componentRef;

};

const setComponentRef = (ref: any) => {

componentRef = ref;

};

const reactToPrintTrigger = () => {

return <Popover content="打印" placement="rightTop" trigger="hover">

</Popover>;

};

下面就是预览图片

前端使用print，打印页面功能相关推荐

window.print 打印页面指定区域
这一阵子由于项目需要,需要在项目某页面下加一个打印的功能,在网上查过之后,知道了window.print 这个函数,这个函数可以很方便的打印当前窗口中的内容, 但是这个有时候并不能满足广大用户的需求: ...
window.print()打印页面宽度为1000
使用window.print()得时候如果Body 没设置宽度或者为100%得时候打印页面得宽度为700~800 多了会被裁掉! 当设置body宽度后以我这边为例 body 1200px 的 ...
关于window.print打印分页功能
平常window.print分页一般打印时用到page-break-after:always; 打印的样式设置在 <style type="text/css" media=& ...
js的window.print打印页面不打印网页中的“打印”按钮
设置样式来控制不打印"打印"按钮: <style type="text/css" media="print"> .noprint ...
Python Print打印计时器功能
1.倒计时我们仔细看看print的参数:print(value,sep=' ',end='\n',file=sys.stdout,flush=False) 这个value是我们要打印的字符串,sep ...
前端使用print.js实现打印
前言项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容.下面的内容基于vue. 如果需要用到前端生成二维码可以看我的这篇文章:在vue项目中使用q ...
使用window.print()打印局部页面，ifrme打印ie报错
问题: 使用window.print();打印页面,将不需要的数据隐藏,将需要的数据显示,打印完成之后将刚才隐藏的数据还原,显示的数据隐藏, 谷歌浏览器.部分ie能一气呵成, 火狐浏览器以及少数ie ...
window.print()打印网页局部内容
用window.print()打印网页局部内容今天客户让添加个打印证照功能,直接用window.print()打印的是整个页面,而用以下方法就可以只打印证明了 <!--window.print ...
解决打印页面el-table打印不全问题
起因: 做打印页面功能,页面中有el-table元素,发现弹出来的打印页面,只打印了几个table列,还有好几个列没打印. 然后看代码,用到的方法是: window.print();并不是这个方法错了 ...

前端使用print，打印页面功能

前端使用print，打印页面功能相关推荐

最新文章

热门文章