一般情况来说呢,类似这种发票预览,合同预览之类的都是后端返回一个PDF文件路径来前端新开窗口展示一下就OK了,可是我们的PD大人非要前端整一下。网上溜达了一圈,感觉下载一个好费劲,就琢磨着花点时间自己写了一个;
自己写出来的效果图如下:点击查看预览 额,感觉应该能交了差,长得还挺好看。
这里是使用css仿栅格布局做的一个发票预览模板,所有的黑色字体部分都是可以支持参数传入的。其他模块的内容想要支持入参的话只能down下来自己改下代码了。后续我上传一下,希望能给接到同样奇葩需求的小伙伴节省点时间。
这里会涉及到一个金额转化为票据上中文大写数字的问题,搜索了一番又自己改造了下,可以通过以下简单方法实现罗马数字转为中文大写:
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包需要的小伙伴可以自取