¶ qq群:984691576
本文使用VUE3.0
¶ 1 创建项目
npm create vue@latest
按提示完成项目创建
依次执行以下命令，确保项目可以正常运行使用
cd useofd
npm install
npm run dev
在执行完成npm run dev后提示如下图片：
在浏览器输入
http://localhost:5173/就可以看到VUE的经典页面，说明创建项目成功
¶ 2 安装EAYSOFD依赖和EASYOFD组件
//依赖
npm i jszip x2js jb2 opentype.js
//本程序
npm i easyofd
¶ 3 程序调整
¶ 3.1 删除不需要的组件
略
¶ 3.2 增加使用EASYOFD的VUE组件
¶ 3.2.1 定义需要渲染的div
<template>
<div id="1111111"> </div>
</template>
¶ 3.2.2 在控件加载时初始化组件
onMounted(() => {
let yourElement=document.getElementById("1111111");
let ofd=new EasyOFD('myofdID', yourElement);
})
EasyOFD展示工具类，只需要两个参数就可以完成页面渲染
参数一：是html内渲染后的唯一ID
参数二：是1.2定义的渲染div
¶ 3.2.3 完整代码
<script setup>
import EasyOFD from "easyofd";
import { onMounted } from 'vue'
onMounted(() => {
let yourElement=document.getElementById("1111111");
let ofd=new EasyOFD('myofdID', yourElement);
})
</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>
¶ 3.3 调整APP.VUE代码
<script setup>
import UseOfd from './components/UseOfd.vue'
</script>
<template>
<main>
<UseOfd />
</main>
</template>
<style scoped>
</style>
¶ 3.4 调整后的目录结构
¶ 3.5 执行后的效果
npm run dev
效果
¶ 4 异步从网站获取文件
本节内容需要安装在服务器上，例如NGINX,TOMCAT等。本地调试环境无法正常运行。
错误内容如下：
Access to XMLHttpRequest at 'http://www.easyofd.cn/files/1.ofd' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
¶ 4.1 axios 安装
npm install axios
¶ 4.2 程序调整
axios.get('http://www.easyofd.cn/files/1.ofd', { responseType: 'blob' })
.then(response => {
const blob = new Blob([response.data], { type: 'application/octet-stream' });
ofd.loadFromBlob(blob);
})
.catch(error => {
console.error('获取文件失败:', error);
});