Chinaunix首页 | 论坛 | 博客
  • 博客访问: 502086
  • 博文数量: 99
  • 博客积分: 2030
  • 博客等级: 大尉
  • 技术积分: 783
  • 用 户 组: 普通用户
  • 注册时间: 2006-08-12 09:11
文章分类

全部博文(99)

文章存档

2023年(2)

2022年(1)

2020年(1)

2019年(1)

2018年(4)

2017年(16)

2016年(60)

2015年(1)

2013年(3)

2006年(10)

我的朋友

分类: Web开发

2023-08-01 01:03:16

EasyOFD
an ofd file web shower

一个在web端展示ofd文件的控件,该控件基于CANVAS绘制。
该控件使用了以下外部程序
1)jszip:解决解压文件。
2)x2js: 解决XML文件到JS转换
3)easyjbig2: 解决ofd内部使用jb2文件存储的图像转换,若你的项目中没有这类文件,可以不加载。
该控件着重页面展示,主要完成了图元的文本、图片和路径的解释和输出,展示了电子印章,并未对其他音频、视频、动画、签名、签封等内容进行处理。

一、背景

OFD(Open Fixed-layout Document)是一种开放式固定布局文档格式,用于存储和交换电子文档。
它是中国国家标准局发布的国家标准,旨在提供一种标准化的固定布局文档格式,适用于电子出版、办公自动化和文档交换等领域。

OFD文件具有以下特点:

固定布局:OFD文件采用固定布局,可以准确地呈现文档的排版、样式、字体和图形等内容。
这使得OFD文件在保持文档原始格式和外观方面非常有优势,适用于需要保留版式的电子文档,例如报纸、杂志、书籍等。

多媒体支持:OFD文件支持多媒体元素的嵌入,包括图像、音频、视频和动画等。这使得OFD文件可以呈现更丰富的内容形式,提供更好的用户体验。

数据安全:OFD文件支持数据加密和数字签名,可以确保文档内容的安全性和完整性。这对于需要保密或验证文档来源的场景非常重要。

可扩展性:OFD文件采用基于XML的文件结构,具有良好的可扩展性。这意味着可以将其他元数据信息和自定义属性添加到文档中,以满足特定需求。

OFD文件的应用广泛,包括电子出版、电子文档管理、电子归档等领域。它为电子文档的可靠交换和跨平台显示提供了一种统一的解决方案,同时保留了文档的固定布局和视觉效果。

二、执行标准

2.1 板式文档

执行国家版式文档格式标准——《GB/T 33190-2016 电子文件存储与交换格式 版式文档》 Electronic files storage and exchange formats—Fixed layout documents
标准链接:

2.2 电子印章、电子签章

执行国家版式文档格式标准——《GB/T 38540-2020 信息安全技术 安全电子签章密码技术规范》 Information security technology—Technical specification secure electronic seal signature cryptography
标准链接:

三、使用方法

3.1 HTML使用

 
	

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     
  8.     <script type="text/javascript">
  9.     function load(){
  10.             let yourElement=document.getElementById("yourElementId");
  11.      let easyOfd = new EasyOFD('myofdID', yourElement);
  12.         //你的文件url地址下载后传递给 loadFromBlob方法
  13.             easyOfd.loadFromBlob(blob);
  14.     }
  15.     </script>
  16. <style>
  17.     .OfdButton{
  18.      padding: 10px 20px;
  19.      background-color: #007bff;
  20.      color: #fff;
  21.      border: none;
  22.      border-radius: 5px;
  23.      cursor: pointer;
  24.      margin-right: 10px;
  25.     }
  26.   </style>
  27.     
  28.     <body onload="load()" style="
  29.      margin: 0;">
  30.   <div id='yourElement'>
  31.   </div>
  32.     <body>
  33.     </body>
  34.     <script type="text/javascript" src="../lib/x2js.js"></script>
  35.     <script type="text/javascript" src="../lib/jszip.min.js"></script>
  36.     <script type="text/javascript" src="../lib/eaysjbig2.js"></script>
  37.     <script type="text/javascript" src="./EasyOFD.js"></script>
  38.   
  39.     
  40. </html>
	

3.2 VUE使用

待增加

四、展示样例

	

4.1 增值税发票

4.2 南航航空行程单

4.3 铁路电子客票

4.4 银行回单

4.5 银行对账单

五、项目地址

地址 六、联系我 邮箱: 11627685@qq.com
 
 
 
 
 
 
阅读(160) | 评论(0) | 转发(0) |
0

上一篇:C++ 常量指针和指针常量

下一篇:没有了

给主人留下些什么吧!~~