Git Product home page Git Product logo

ofd.js's Introduction

ofd.js

在使用ofd.js前请务必悉知 《ofd.js免责声明》

- license

目前方案采用:svg及canvas渲染实现,百分百纯前端渲染

效果: 示例

小程序OFD验签示例

示例

微信

示例

npm i ofd.js

解析OFD文件

parseOfdDocument({
        ofd: ofdFile,
        success() {
            
        },
        fail(error){
            console.log(error)
        }
    })

一次性渲染OFD对应文档的所有页,适合页数少

此方法需要在parseOfdDocument success回调后使用

参数 说明 是否必填
documentIndex ofd文档中document的索引,默认从0开始
width 预期渲染的宽度,像素值 ,如800
renderOfd(documentIndex, width).then(divs=>{
    // do something
})

渲染OFD对应文档的对应页

此方法需要在parseOfdDocument success回调后使用

参数 说明 是否必填
documentIndex ofd文档中document的索引,默认从0开始
pageIndex ofd文档中页码,默认从0开始
width 预期渲染的宽度,像素值 ,如800
renderOfdByIndex(documentIndex, pageIndex, width).then(div => {
    // do something
}})

ofd推荐项目

OFD Reader & Writer

参与贡献

发挥人人为我,我为人人的优良传统,多做pr~~~

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

项目关注度

项目获得 Star曲线

Stargazers over time

ofd.js's People

Contributors

bluegitter avatar dltech21 avatar roy19831015 avatar xukaishan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

ofd.js's Issues

直接使用首页的那段短码,无法使用么?

那段短码报错,can not read property symbol.iterator of undefined。
const divs = renderofd(1200,res)这里报错了。

parseOfdDocument({
ofd: file,
success(res) {
//输出ofd每页的div
const divs = renderOfd(1200, res);
//获取签章div的信息, 具体看demo
for(let ele of document.getElementsByName('seal_img_div')) {
this.addEventOnSealDiv(ele, JSON.parse(ele.dataset.sesSignature), JSON.parse(ele.dataset.signedInfo));
}
},
fail(error) {
console.log(error)
}
});

就是照着这个写的。
renderOfd(screenWidth, res)。这个地方第二个参数,在你src的helloworld.vue里参数是res[0],改掉之后就可以跑了,没有报错。首页那边标错了。

SVG中image无法铺满

OFD文件签署中,印章尺寸被强制改变(如:印章尺寸为4030被改写成4040),渲染之后显示印章图片还是原始尺寸40*30,这种情况应该进行修复。
@DLTech21

webpack打包问题

webpack打包时,ofd.js需要babel转译才能打包成功。这里是否可以优化一下,改成不用功babel转译即可的?

运行项目报错

当我使用npm run dev [启动我自己做的集成ofd.js的项目时报错,提示ses_signature_parser.js文件中的decodeSES_Signature方法报错。

微信图片_20220124170138

MaxScale bug?

export const setMaxPageScal = function (scale) { MaxScale = scale > 5 ? 5 : scale; }

代码中有部分没明白为什么这么做,导致渲染结果预期不对

  1. 最大缩放比, 设置最大缩放比的原因是?为什么最大缩放比初始值为10,调用之后变成5了?
let MaxScale = 10;

let Scale = MaxScale;

export const setMaxPageScal = function (scale) {
    MaxScale = scale > 5 ? 5 : scale;
}
  1. 传进来的width,进来之后被修改了,导致最终结果有误差
const scale = ((screenWidth - 10) / parseFloat(array[2])).toFixed(1);

如上代码所示,为什么要减10,然后算出来的缩放比要取一位小数,这样导致最终有几个像素的误差,当然,越大越明显

未显示发票章

红色签章未显示,麻烦帮忙看一下哪里的问题,新手上路,烦请指导,多谢!

image

image

image

ReferenceError: File is not defined in ofd.js

Using command:
install: npm install ofd.js --save-dev
import: var ofdjs = require('ofd.js');
when node xxx.js the following error is thrown.
ReferenceError: File is not defined
at Module.C (D:\spring\frontend\demo\nodejs12\node_modules\ofd.js\lib\ofd.umd.min.js:67:179480)
at displayOfdDiv (D:\spring\frontend\demo\nodejs12\app.js:28:11)
at D:\spring\frontend\demo\nodejs12\app.js:92:4
at Layer.handle [as handle_request] (D:\spring\frontend\demo\nodejs12\node_modules\express\lib\router\layer.js:95:5)
at next (D:\spring\frontend\demo\nodejs12\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (D:\spring\frontend\demo\nodejs12\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (D:\spring\frontend\demo\nodejs12\node_modules\express\lib\router\layer.js:95:5)
at D:\spring\frontend\demo\nodejs12\node_modules\express\lib\router\index.js:281:22
at Function.process_params (D:\spring\frontend\demo\nodejs12\node_modules\express\lib\router\index.js:335:12)
at next (D:\spring\frontend\demo\nodejs12\node_modules\express\lib\router\index.js:275:10)

纯文字OFD文件打开白屏问题

ofd文件为纯文字文件,文件大小为9MB左右,文件内页码1287页,现在一次性渲染无法进行打开疑似GPU超负荷,是否应配置分部渲染(如pdf.js首次加载10页,后续根据当前页面进行前后5页渲染,减少硬件依赖并提升用户体验),文件见附件。

1287页.zip

另能否开源小程序源码,学习开发一下

印章有白色背景,在福昕上是透明的

感谢作者的分享,写的很好。

ofd_parser.js 里印章 stamp.sealObj.type === ‘png’ 的话, uint8转换base64的图片是有白色背景的,而在福昕上是看透明的。

所以我使用这个方法又转了一次图片,不知道有没有更好的办法

function changeImage(dataImg, callback) {
	let self = this;
	var base64Img = document.createElement("base64Img"),
		canvas = document.createElement("canvas"),
		context = canvas.getContext("2d");
	// 创建新图片
	var img = new Image();
	var baseImg;
	img.src = dataImg;
	img.addEventListener(
		"load",
		function () {
			// 绘制图片到canvas上
			canvas.width = img.width;
			canvas.height = img.height;
			context.drawImage(img, 0, 0);

			// 将canvas的透明背景设置成白色
			var imageData = context.getImageData(
				0,
				0,
				canvas.width,
				canvas.height
			);
			for (var i = 0; i < imageData.data.length; i += 4) {
				//rgb大于250的透明度y均设置成0
				if (
					imageData.data[i] > 250 &&
					imageData.data[i + 1] > 250 &&
					imageData.data[i + 2] > 250
				) {
					imageData.data[i + 3] = 0;
				}
			}
			context.putImageData(imageData, 0, 0);
			baseImg = canvas.toDataURL("image/png").slice(22);//返回base64
			if (typeof callback !== undefined) {
				if (callback) callback(baseImg);
			}
		},
		false
	);
}

国密验签显示签名值验证失败

@roy19831015

我在使用项目显示并验签生成的OFD文档时,提示签名值验证失败。
2021-12-21_234222
使用数科的阅读器可以验签成功,另外这个文件就是使用数科的服务生成出来的。
注意到签名值前多了02,代码中是去掉的00,我修改后去掉02后也不能成功。
if(sigValueHex.indexOf('00')==0){ sigValueHex = sigValueHex.substr(2,sigValueHex.length-2); }
2021-12-21_234634
研究了一下午,也没太清楚,感觉SES_Signature_Verify方法中的调用参数userId有关系。不知道这个id代表什么。

改了这个id后,项目自带的演示发票也验签失败了。

sm2.doVerifySignature(msg, sigValueHex, publicKey, { der : true, hash: true, userId:"1234567812345678"}

附上原文件,请帮忙看看是什么情况。
2020010272000600086900000000043540122236009_外围.zip

ofd.js如何实现打印?

利用window.print()调用浏览器打印时,输出的是整个网页的内容,能否只打印ofd预览的内容。

ie兼容性问题

上传ofd文件,new ImageData()构造函数不兼容ie,希望进一步优化解决

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.