OFD文件纯前端查看解决方案

news2025/1/15 6:43:42

文章目录

    • ofd.js原有bug修复
      • 1、ofd格式文档打开报错
      • 2、签章信息不显示
    • 效果展示
    • 源码下载

使用前请查看免责声明

ofd.js原有bug修复

1、ofd格式文档打开报错

原因分析:

文档打开时会解析所用到的字体信息,如果字体不在ofd.js预设字体时,会触发报错

问题解决:

如果没有字体,默认使用“宋体”字体显示

export const getFontFamily = function (font) {
  if (!font) {
    return FONT_FAMILY["宋体"];
  }
  if (FONT_FAMILY[font.toLowerCase()]) {
    font = FONT_FAMILY[font.toLowerCase()];
  }
  for (let key of Object.keys(FONT_FAMILY)) {
    if (font.toLowerCase().indexOf(key.toLowerCase()) != -1) {
      return FONT_FAMILY[key];
    }
  }
  return font;
};

主要是添加这一段:

  if (!font) {
    return FONT_FAMILY["宋体"];
  }

2、签章信息不显示

原因分析:

签章之后的OFD文档会在Annots目录下直接生成Annotation*.xml文件,但是原来ofd.js对于签章信息处理时fileLoc与现有文件对不上,所以渲染失败

问题解决:

根据当前OFD版式文件的文件目录,调整签章显示代码逻辑

const getAnnotations = async function (annoBase, annotations, doc, zip) {
    let annotationObjs = {};
    for (let anno of annotations) {
        if (!anno) {
            continue
        }
        const pageId = anno['@_PageID'];
        let fileLoc = anno['ofd:FileLoc'];
        fileLoc = replaceFirstSlash(fileLoc);
        if (annoBase && fileLoc.indexOf(annoBase + "/") === -1) {
            fileLoc = `${annoBase}/${fileLoc}`;
        }
        if (fileLoc.indexOf(doc) === -1) {
            fileLoc = `${doc}/${fileLoc}`;
        }

        if (zip.files[fileLoc]) {
            const data = await getJsonFromXmlContent(zip, fileLoc);

            let array = [];
            array = array.concat(data['json']['ofd:PageAnnot']['ofd:Annot']);
            if (!annotationObjs[pageId]) {
                annotationObjs[pageId] = [];
            }
            for (let annot of array) {
                if (!annot) {
                    continue
                }
                const type = annot['@_Type'];
                const visible = annot['@_Visible'] ? annot['@_Visible']:true;
                const appearance = annot['ofd:Appearance'];
                let appearanceObj = {type, appearance, visible};
                annotationObjs[pageId].push(appearanceObj);
            }
        }
    }
    return annotationObjs;
}

主要是修改这一段:

if (annoBase && fileLoc.indexOf(annoBase + "/") === -1) {
    fileLoc = `${annoBase}/${fileLoc}`;
}

效果展示

在这里插入图片描述

源码下载

本文基于 ofd.js 源码进行调整,原仓库地址:https://github.com/DLTech21/ofd.js
如需要源码可以访问代码仓库 https://github.com/WednesdayCAT/ofd.js
如果本文有用,请给原仓库和本仓库都点颗小星星,谢谢!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2276872.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用 Docker 部署 Java 项目(通俗易懂)

目录 1、下载与配置 Docker 1.1 docker下载(这里使用的是Ubuntu,Centos命令可能有不同) 1.2 配置 Docker 代理对象 2、打包当前 Java 项目 3、进行编写 DockerFile,并将对应文件传输到 Linux 中 3.1 编写 dockerfile 文件 …

二手车交易系统的设计与实现(代码+数据库+LW)

摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统二手车交易信息管理难度大,容错率低&#xf…

抖音ip属地没有手机卡会显示吗

在数字时代,社交媒体平台如抖音已成为人们日常生活的重要组成部分。随着抖音等应用对用户体验和隐私保护的不断优化,IP属地显示功能逐渐走进大众视野。这一功能旨在提高网络环境的透明度,打击虚假信息和恶意行为。然而,对于没有手…

springMVC---resultful风格

目录 一、创建项目 pom.xml 二、配置文件 1.web.xml 2.spring-mvc.xml 三、图解 四、controller 一、创建项目 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi…

[Git] 深入理解 Git 的客户端与服务器角色

Git 的一个核心设计理念是 分布式&#xff0c;每个 Git 仓库都可以既是 客户端&#xff0c;也可以是 服务器。为了更好地理解这一特性&#xff0c;我们通过一个实际的 GitHub 远程仓库和本地仓库的场景来详细说明 Git 如何在客户端和服务器之间协作&#xff0c;如何独立地进行版…

网络安全-RSA非对称加密算法、数字签名

数字签名非常普遍&#xff1a; 了解数字签名前先了解一下SHA-1摘要&#xff0c;RSA非对称加密算法。然后再了解数字签名。 SHA-1 SHA-1&#xff08;secure hash Algorithm &#xff09;是一种 数据加密算法。该算法的思想是接收一段明文&#xff0c;然后以一种不可逆的方式将…

了解 ASP.NET Core 中的中间件

在 .NET Core 中&#xff0c;中间件&#xff08;Middleware&#xff09; 是处理 HTTP 请求和响应的核心组件。它们被组织成一个请求处理管道&#xff0c;每个中间件都可以在请求到达最终处理程序之前或之后执行操作。中间件可以用于实现各种功能&#xff0c;如身份验证、路由、…

【三维数域】三维数据调度-负载均衡和资源优化

在处理大规模三维数据时&#xff0c;负载均衡和资源优化是确保系统高效运行、提供流畅用户体验的关键。这两者不仅影响到系统的性能和稳定性&#xff0c;还直接决定了用户交互的质量。以下是关于如何在三维数据调度中实现有效的负载均衡和资源优化的详细探讨。 一、负载均衡 负…

AI大模型开发—1、百度的千帆大模型调用(文心一言的底层模型,ENRIE等系列)、API文档目的地

文章目录 前言一、千帆大模型平台简介二、百度平台官网初使用1、平台注册和使用2、应用注册 并 申请密钥3、开启千帆大模型 API调用a、API文档b、 前言 本章旨在为读者奉献一份实用的操作指南&#xff0c;深入探索如何高效利用百度千帆大模型平台的卓越功能。我们将从账号注册…

Java Stream流操作List全攻略:Filter、Sort、GroupBy、Average、Sum实践

在Java 8及更高版本中&#xff0c;Stream API为集合处理带来了革命性的改变。本文将深入解析如何运用Stream对List进行高效的操作&#xff0c;包括筛选&#xff08;Filter&#xff09;、排序&#xff08;Sort&#xff09;、分组&#xff08;GroupBy&#xff09;、求平均值&…

《视听导报》是什么类型的报纸?报纸上发文章要交版面费吗?

作为个人成果发表的重要场所&#xff0c;报纸目前正得到越来越多单位的认可。不过在投稿时&#xff0c;我们既要考虑投稿的报纸是否符合评审标准&#xff0c;也要考虑发表文章的成本是否在我们的承受范围之内。 下面就让我们以《视听导报》为例&#xff0c;了解下如何查看报纸的…

candb++ windows11运行报错,找不到mfc140.dll

解决问题记录 mfc140.dll下载 注意&#xff1a;放置位置别搞错了

服务器引导异常,Grub报错: error: ../../grub-core/fs/fshelp.c:258:file xxxx.img not found.

服务器引导异常,Grub报错: error: ../../grub-core/fs/fshelp.c:258:file xxxx.img not found. 1. 故障现象2. 解决思路3. 故障分析4. 案件回溯5. 解决问题 1. 故障现象 有一台服务器业务报无法连接. 尝试用Ping命令发现无法ping通. 通过控制台查看发现有以下报错: error: ..…

LeetCode第432场周赛 (前3题|多语言)

比赛链接&#xff1a;第432场周赛 文章目录 3417. 跳过交替单元格的之字形遍历思路代码CJavaPython 3418. 机器人可以获得的最大金币数思路代码CJavaPython 3419. 图的最大边权的最小值思路代码CJavaPython 总结 3417. 跳过交替单元格的之字形遍历 思路 没啥好说的就是模拟 按…

下载导出Tomcat上的excle文档,浏览器上显示下载

目录 1.前端2.Tomcat服务器内配置3.在Tomcat映射的文件内放置文件4.重启Tomcat&#xff0c;下载测试 1.前端 function downloadFile() {let pictureSourceServer "http://192.168.1.1:8080/downFile/";let fileName "测试文档.xlsx";let fileURL pictu…

蓝桥杯备赛:顺序表和单链表相关算法题详解(上)

一.询问学号&#xff08;顺序表&#xff09; 1.题目来源&#xff1a; https://www.luogu.com.cn/problem/P3156 &#xff08;洛谷原题&#xff09; 2.解析与代码实现&#xff1a; &#xff08;1&#xff09;解析&#xff1a; 首先结合题目和输出样例不难看出这道题目是围绕两…

Java 基于微信小程序的高校科研团队管理系统设计与实现(附源码,部署,文档

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

C#,任意阶幻方(Magic Square)的算法与源代码

1 什么是幻方&#xff1f; 幻方&#xff08;Magic Square&#xff09;是一种将数字安排在正方形格子中&#xff0c;使每行、列和对角线上的数字和都相等的方法。 幻方也是一种中国传统游戏。旧时在官府、学堂多见。它是将从一到若干个数的自然数排成纵横各为若干个数的正方形&…

java求职学习day12

1 泛型机制&#xff08;熟悉&#xff09; 1.1 基本概念 &#xff08;1&#xff09;通常情况下集合中可以存放不同类型的元素&#xff0c;是因为将所有对象都看作Object类型放入&#xff0c;因此从集合中取出元素时&#xff0c;也是Object类型&#xff0c;为了表达该元素真实的…

uni-app h5修改浏览器导航栏的 title以及icon

1.title 在pages.json文件中修改:"navigationBarTitleText":"uni-app" 2.icon的修改 2.1 在static中新建一个index.html文件作为模板文件&#xff0c;并且将你的icon图片也放在static文件夹下 2.2 在index.html文件中加入如下代码&#xff08;记得icon文件…