OFD文件WEB前端展示-easyofd(1.0.6)

一、升级内容

(1)增加了图元的支持 opentype

(2)优化了CTM问题

(3)增加了备注单元的支持，包括内部的图片和文字展示

二、使用方法

2.1 HTML使用

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	
	<script type="text/javascript">

	function load(){
            let yourElement=document.getElementById("yourElementId");
	    let easyOfd =  new EasyOFD('myofdID', yourElement);
		//你的文件url地址下载后传递给 loadFromBlob方法 
            easyOfd.loadFromBlob(blob);
	}
	script>

<style>
	.OfdButton{
	  padding: 10px 20px;
	  background-color: #007bff;
	  color: #fff;
	  border: none;
	  border-radius: 5px;
	  cursor: pointer;
	  margin-right: 10px;
	}
  style>

	
	<body onload="load()" style="
	    margin: 0;">

  <div id='yourElement'>

  div>
	<body>
	body>
	<script type="text/javascript" src="./lib/x2js.js">script>
	<script type="text/javascript" src="./lib/jszip.min.js">script>
	<script type="text/javascript" src="./lib/eaysjbig2.js">script>
	<script type="text/javascript" src="./lib/opentype.min.js">script>
	<script type="text/javascript" src="./EasyOFD.js">script>
  
	
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

2.2 VUE使用

创建项目，增加依赖


npm create vue@latest

//依赖
npm i jszip
npm i x2js
npm i jb2
npm i opentype //字体图元的支持
//本程序
npm i easyofd


1
2
3
4
5
6
7
8
9
10
11
12

在vue控件内使用

<script setup>
import EasyOFD from "easyofd";
import { onMounted } from 'vue'

onMounted(() => {
  let yourElement=document.getElementById("1111111");
  let ofd=new EasyOFD('myofdID', yourElement);
  
  //ofd.loadFromBlob(blob);

})


</script>

<template>
      <div id="1111111"> </div>
      
</template>

<style >
 .OfdButton{
	  padding: 10px 20px;
	  background-color: #007bff;
	  color: #fff;
	  border: none;
	  border-radius: 5px;
	  cursor: pointer;
	  margin-right: 10px;
	}
</style>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

相关阅读:
220904每日一题1：Java方法重写
在网页中引用 JavaScript 代码有几种常见的方法?
实战纪实 | 某米企业src未授权访问
相机图像质量研究(23)常见问题总结：CMOS期间对成像的影响--紫晕
30分钟你也能搭建一个vue3.2+vite+pinia+Ts+element plus+axios的后台管理系统
《009.SpringBoot之汽车租赁系统》
了解这6个原因才知道为什么需要FTP替代方案了
大数据运维实战第十一课 HDFS 组件运行机制剖析及 HDFS Shell 的使用
elasticSearch+kibana+logstash+filebeat集群改成https认证
怎样给视频添加自定义的封面

原文地址：https://blog.csdn.net/likewindy/article/details/136173591