前端网页打印

最新推荐文章于 2024-07-24 11:09:48 发布

“勤字开头万事成”

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量458

点赞数 1

文章标签： javascript reactjs css

本文链接：https://blog.csdn.net/qq_45380371/article/details/104946461

版权

大家好！本人第一次写博客，写的不好之处或不对之处，请多多指教。内容仅供参考！

我的主要目标是，首先在页面上编写出需要打印的内容，然后点击打印按钮，直接在页面上进行打印。对完成这个目标遇到的问题进行如下总结：
首先用到的技术栈是react，js，ES6，css，html，包管理npm，接下来主要讲的是条码打印和二维码打印遇到的问题。
关于条形码和二维码的生成和打印最后面有最新代码（更简洁易懂）
1.对应的条码打印的npm包是jsbarcode
导入包：import JsBarcode from ‘jsbarcode’;

	printBarCode=(props)=>{
        let {code,text,format,width} = props;
        // 调用 JsBarcode方法生成条形码
        JsBarcode(this.barcode,code, {//code为扫描出来的结果，不能是中文
            width: width,//线条宽度
            // marginLeft: 30,
            // marginTop: 50,
            //background: "#dddddd",//背景颜色
            lineColor: "#000000",//线条颜色
            //EANEAN是欧洲的标准EAN8、EAN13、EAN128
            //Code 39,Code128,Code39是Intermec公司于1971年发明的条码码制，是目前应用最广泛的编码之一
            format: format,//"EAN13",条码格式EAN8、EAN13、EAN128,Code 39,Code128,Code39
            height: 25,//条形码高度
            text: text,//条码下显示的值可以自定义 
            //fontOptions: "italic",//字体样式 斜体 bold italic bold
            //font: "fantasy",//字体 默认monospace
            // textAlign: "left",//文字居中样式
            // textPosition: "top",//文本位置
            // textMargin: 25,//文本距离父组件的距离
            fontSize: 12,//字体大小
            margin: 5,
        });
    }
	<div style={{display:"inline-block"}}>
    	<svg
     		ref={(ref) => {
     			this.barcode = ref;
     		}}
     	/>
     </div>

2.打印二维码
react生成二维码的包，qrcode.react；

<QRCode value="123" />

在这里插入图片描述
value就是扫描出来的结果。但是后来发现在网页上进行打印，打印不出来。经过查找资料，
qrcode生成二维码其实是一个canvas元素，虽然打印的时候吧canvas传递过去了，但是并没有显示canvas的内容，后来才知道二维码打印好像要是图像，图片格式。后来查找资料就换了一种。需要的npm包：qr-image，svgpath

getSvg=(data)=>{
	let {barCodeNo,itemNo,itemBrandstyle,itemBrandName,deliQty} = data;
	//这里是扫码后显示的结果
	let	originPath=qr.svgObject(`${barCodeNo}&${itemNo}&${deliQty}&${itemBrandstyle}&${itemBrandName}`).path
	let scaledPath = svgpath(originPath).scale(1, 1).toString()
	return scaledPath;
}
//transform="scale(2)",简单的说就是缩放，原来的单位长度缩放为原来的两倍
<div style={{display:"inline-block",position:"relative",top:"-35px"}}>
	<svg width="35" height="35" transform="scale(2)" style={{
		marginTop: '5px'}}
	>
		<path d={this.getSvg? this.getSvg : null}/>
	</svg>
</div>

3.浏览器打印的代码
1）方法一：获取打印内容，将打印内容打印，然后重新加载页面。或者取消打印。这样重新加载页面，速度慢，体验度不好。

let printData = document.getElementById("print").innerHTML; //获得 div 里的所有 html 
document.body.innerHTML = printData ;
window.print();
window.location.reload();

2）方法二：重新打开浏览器窗口，进行打印

let printData = document.getElementById("print").innerHTML;
document.querySelector('#root').className = 'print-hide' //将不需要打印的元素隐藏
var wind = window.open("", "newwin","toolbar=no,scrollbars=yes,menubar=no");
wind.document.body.appendChild(printView) //将待打印元素追加到body中
wind.print() //调用浏览器的打印预览
wind.close();//关闭新的窗口
document.body.removeChild(printView) //将待打印元素从body中移除
document.querySelector('#root').className = '' //将原始页面恢复

3）方法三：先将不需要打印的内容，隐藏起来，再将打印内容，放在body中，然后进行打印，再去除打印的内容，将不需要打印的内容还原。

//设置页面打印样式。横向打印，上下左右间距5px
let style = document.createElement('style');
style.innerHTML = "@page{size: landscape;margin: 5px;}";
window.document.head.appendChild(style);
let printData = document.getElementById("print").innerHTML
document.querySelector('#root').className = 'print-hide' //将不需要打印的元素隐藏
document.body.appendChild(printView) //将待打印元素追加到body中
window.print() //调用浏览器的打印预览
document.body.removeChild(printView) //将待打印元素从body中移除
document.querySelector('#root').className = '' //将原始页面恢复

4.浏览器打印中遇到的问题
1）可能进行打印操作，打印中的样式和没有打印不一样。（样式没有起作用）
方法一：将所有的样式，写在行内，即style(本人代码就是用方法一)
方法二：使用react-inline-css(之前试过，没有实现，还没解决方法)
2）取消打印时，解决缓冲久或者重新加载页面
重新加载页面：window.location.reload();
不需要重新加载页面：先将不需要打印的内容，隐藏起来，再将打印内容，放在body中，然后进行打印，再去除打印的内容，将不需要打印的内容还原。

document.querySelector('#root').className = 'print-hide' //将不需要打印的元素隐藏
document.body.appendChild(printView) //将待打印元素追加到body中
window.print() //调用浏览器的打印预览
document.body.removeChild(printView) //将待打印元素从body中移除
document.querySelector('#root').className = '' //将原始页面恢复

3）打印窗口中的样式

@page{
	size: 5.5in 8.5in portrait;//5.5英寸宽，8.5英寸高；size: A4 //A4纸
	//可以控制打印方向，portrait： 纵向打印地,  landscape: 横向。
	margin:5px//margin外边距等等
}

4）打印时，可能一次性打印多个部分，第一部分，有第一页没有打印完，第二页接着打印，第二页有多余空白处，第二部分缺再第二页，并没有重新在另一页。例如，下面总共3页，第1页
虽然有空白部分，下面的采购订单并没有自动从第二页开始。
在这里插入图片描述
需要自动分页:
参数：page-break-before，page-break-after
值：auto; always; left; right;
例子：<div style={{pageBreakBefore: “auto”,pageBreakAfter: “always”}}>
5）设置打印的页眉页脚（目前没有成功实现）
IE浏览器（仅参考）

		var hkey_root, hkey_path, hkey_key;
        hkey_root = "HKEY_CURRENT_USER";
        hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
        //设置网页打印的页眉页脚为空
        function pagesetup_null() {
            try {
                var RegWsh = new ActiveXObject("WScript.Shell");
                hkey_key = "header";
                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "&w&b页码,&p/&P");
                hkey_key = "footer";
                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "&u&b&d");
            } catch (e) { };
        }

其他的还可以通过设置样式控制

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  }
  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }
  @top-right {
    content: string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

在这里插入图片描述
5.最新的条形码和二维码生成打印
1）条形码：依赖的npm包，ac-barcode

import AcBarcode from "ac-barcode"
<AcBarcode 
	value={"9787123"}//扫出的结果（这个必须要，否则没有条形码，其他选填）
	renderer={"canvas"} //条形码格式svg , canvas,img
	format={"CODE128"}//条形码码制CODE128，EAN13（还有很多自己找）
	width={2}//线条宽度
	height={100}//条形码高度
	displayValue={true}//是否展示条形码下面的文本
	fontOptions={""}//条形码下面文本样式 斜体 bold italic bold
	font={"monospace"}//条形码下面文本什么字体
	textAlign={"center"}//条形码下面文本位置，在条形码下面居中
	textPosition={"bottom"}//条形码下面文本位置，在条形码下面
	textMargin={2}//文本距离父组件的距离
	fontSize={20}//文本大小
	background={"#ffffff"}//背景色
	lineColor={"#000000"}//条形码颜色
	margin={10}//外边距
/>

2）二维码：依赖的npm包，ac-qrcode

import AcQrcode from "ac-qrcodes"
<AcQrcode
	value={"http://tinper.org/"} //扫出的结果（这个必须要，否则没有二维码，其他选填）
    size={128}//二维码的大小
    bgColor={"#ffffff"}//二维码的背景色
    fgColor={"#000000"}//二维码的颜色
    level={"L"}//L，M，Q，H（我也不懂这是干嘛的）
    includeMargin={false}//二维码大小，包不包括外边距（不好解释自己试了就懂）
    renderAs={"canvas"}//二维码格式svg , canvas
/>

“勤字开头万事成”

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端网页打印

1.对应的条码打印的npm包是jsbarcode导入包：import JsBarcode from ‘jsbarcode’; printBarCode=(props)=>{ let {code,text,format,width} = props; // 调用 JsBarcode方法生成条形码 JsBarcode(this.barcode,...
复制链接

扫一扫