首页 > 其他分享 >采用typescript编写,实现ofd前端预览、验章。

采用typescript编写,实现ofd前端预览、验章。

时间:2023-08-21 18:35:05浏览次数:44  
标签:web 功能 typescript ofd 验章 阅读器 本人

前言  浏览器内核已支持pdf文件的渲染,这极大的方便了pdf文件的阅读和推广。ofd文件作为国产板式标准,急需一套在浏览器中渲染方案。

  本人研究ofd多年,分别采用qt、c# 开发了ofd阅读器。本人非前端开发人员,对js、typescript并不熟悉,所以对开发web版阅读器迟迟没有下手。但是,本人闲暇之时就阅读web相关书籍。

  俗话说,编程就是开发思想和业务的结合,编程语言只是具体实现的一种方式。JavaScript语法与c#、java非常类似,看起来毫无违和感;再结合本人对ofd的理解,很快就开发出来一款web阅读器;目前,功能还不是很全,但是核心功能已实现。在ofd渲染部分,本人采用在canvas中画文本、线和图,处理方式与qt很类似,同时考虑了未来的功能扩展(如搜索、加注释等)。

功能说明:

1 支持三种签章标准(GB/T 38540-2020,GB/T 35275-2017,GM/T 0031-2014),鼠标移动到印章,立即显示验签结果。

2 支持文字选中。采用在canvas画文字,处理鼠标移动事件,实现文字选中效果;

3 单个js文件完成所有功能,方便嵌入到其他系统中。

标签:web,功能,typescript,ofd,验章,阅读器,本人
From: https://www.cnblogs.com/yuanchenhui/p/web-ofd-viewer.html

相关文章

  • [React Typescript] React namespace
    export=React;exportasnamespaceReact;declarenamespaceReact{////ReactElements//----------------------------------------------------------------------typeElementType<P=any>={[KinkeyofJSX.I......
  • [React Typescript] Inferring Type Arguments in Curried Hooks
    import{DependencyList,useMemo,useState}from"react";import{Equal,Expect}from"../helpers/type-utils";constuseCustomState=<TValue>(initial:TValue)=>{const[value,set]=useState<TValue>(initial);......
  • [React Typescript] Function overload in React hook
    import{useState}from"react";import{Equal,Expect}from"../helpers/type-utils";typeUseStateReturnValue<T>={value:T;set:React.Dispatch<React.SetStateAction<T>>;};exportfunctionuseStateAsObjec......
  • Deno 中使用 @typescript/vfs 生成 DTS 文件
    背景前段时间开源的STC工具,这是一个将OpenApi规范的Swagger/Apifox文档转换成代码的工具。可以在上一篇(《OpenApi(Swagger)快速转换成TypeScript代码-STC》)随笔里面查看这个工具的介绍和使用。为了支持生成Javascript,近期添加了JavaScript插件,并且生成DTS文件。实......
  • TypeScript学习
    TypeScript快速入门JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美欢的浏览效果。TypeScript是JavaScript的一个超集,它扩展了JavaScript的语法通过在JavaScript的基础上添加静态类型定义......
  • [React Typescript] Discriminated Tuples in Custom Hooks
    import{useEffect,useState}from"react";exporttypeResult<T>=|["loading",undefined?]|["error",Error]|["success",T];exportconstuseData=<T,>(url:string):Result<T>=>......
  • typeScript学习-类、静态数据、静态属性应用
    typeScript学习类、静态数据、静态属性应用类:定义:类就是拥有相同属性和方法的一系列对象的集合。展开理解:类是一个模具,是从这该类包含的所有具体对象中抽象出来的一个概念,类定义了它包含的全体对象的静态特征和动态特征。举例:people类静态特征【属性】name、age、address......
  • typeScript学习-TS类型-其他特殊类型-可变元组
    typeScript学习可变元组:letpeople:[string,number,string,string,string]=["wangwu",23,"地址",'13312341234','备注']//当前三个数据固定格式,后面数据不确认格式时用可变元组//可变元组//letcustomers:[string,number,string,...any[]]=[&qu......
  • typeScript学习-TS类型-其他特殊类型-元组(tuple)
    typeScript学习元组(tuple):满足以下3点的数组就是元组(1)在定义时每个元素的类型都是确定(2)元素值的数据类型必须是当前元素定义的类型(3)元素值的个数必须和定义时个数相同 letsalary:[string,number,number,number,number]=["zhangsan",5000,5000,5000,5000] ......
  • [React Typescript] Well typed a React Context provider
    importReactfrom"react";import{Equal,Expect}from"../helpers/type-utils";constcreateRequiredContext=<Textendsany>()=>{constcontext=React.createContext<T|null>(null);constuseContext=<Te......