使用CSS写一个html发票模板

6,603 阅读1分钟

一般情况来说呢,类似这种发票预览,合同预览之类的都是后端返回一个PDF文件路径来前端新开窗口展示一下就OK了,可是我们的PD大人非要前端整一下。网上溜达了一圈,感觉下载一个好费劲,就琢磨着花点时间自己写了一个;

自己写出来的效果图如下:点击查看预览 额,感觉应该能交了差,长得还挺好看。

这里是使用css仿栅格布局做的一个发票预览模板,所有的黑色字体部分都是可以支持参数传入的。其他模块的内容想要支持入参的话只能down下来自己改下代码了。后续我上传一下,希望能给接到同样奇葩需求的小伙伴节省点时间。

下载地址:github.com/hzxshark/in…

这里会涉及到一个金额转化为票据上中文大写数字的问题,搜索了一番又自己改造了下,可以通过以下简单方法实现罗马数字转为中文大写:

const digitToCNchar = money => {
    const digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖" ];
    const declmalUtil = ["角", "分"];
    const IntUtilExc = ["元", "万", "亿", "兆"];
    const IntUtilBac = ["", "拾", "佰", "仟"];
    const head = money < 0 ? "负" : "";
    money = Math.abs(money);
    let res = "";
    //处理小数
    for(let i = 0;i<declmalUtil.length;i++){
    	let a = Math.pow(10,i+1);
    	a= Math.floor(a*money)%10;
    	res += (digit[a]+declmalUtil[i]).replace(/(零.)+/,'');
    }
    if (res.length < 1) {
    	res = "整";
    }
    //处理整数部分
    let IntPart = Math.floor(money);
    for(let i = 0;i<IntUtilExc.length&&IntPart>0;i++){
    	let part ="";
    	for(let j=0;j<IntUtilBac.length;j++){
            let a = IntPart%10;
            IntPart = Math.floor(IntPart/10);
            part = digit[a]+IntUtilBac[j]+part;
    	}
    	res = part+IntUtilExc[i]+res;
    }
    res=res.replace(/(零[拾佰仟])*零元/,"元");
    res=res.replace(/^(零.)+/,"");
    res=res.replace(/(零[拾佰仟])+/g,"零");
    res=res.replace(/零([万亿兆])+/g,"$1");
    res=res.replace(/零([万亿兆])+/g,"");
    res=res.replace(/^整$/, "零元整");
    return head+res;
}

const money = digitToCNchar('3057900.89')
console.log(money) //叁佰零伍万柒仟玖佰元捌角玖分

这些转换函数和浮点数计算问题我封装了一个npm包需要的小伙伴可以自取

image.png 地址:www.npmjs.com/package/num…

参考链接:gitee.com/BoomMiHua/c…