关于vue使用ofd.js的初级使用，目前还未入门

最新推荐文章于 2025-12-17 03:47:19 发布

原创最新推荐文章于 2025-12-17 03:47:19 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

文章讲述了如何在前端页面直接渲染后端返回的OFD流进行预览，重点在于引入ofd.js的正确版本（0.2.5）以确保电子签章正常显示。通过调用`parseOfdDocument`和`renderOfd`方法解析并渲染文档，同时提供了使用axios获取文件流的方法。

如果你是想直接把后端返回的ofd流渲染在页面预览，先引入ofd.js的依赖，npm install ofd.js(这个命令我当时依赖出来的版本号是^1.4.1)，如果你的ofd文件是有电子签章的，这个版本可能会电子签章不显示，在csdn大佬的帮助下依赖了0.2.5，这个版本电子签章会正常显示。

依赖完之后要在使用的页面引入两个方法

import { parseOfdDocument, renderOfd } from "ofd.js";

<div id='divId' class="xxx">

getViewOfd(){
    parseOfdDocument({
         // ofd写入文件地址
         // ofd: 数据流,（上传流数据或者接口地址）
         // ofd写入文件地址 
          ofd: process.env.VUE_APP_BASE_API + `/xxxx/xxxx/xxxxx?xxxx=${xxx}&certType=${xxxx}`,//或者在parseOfdDocument上面先调用接口把返回的值传在这里
          success(res) {
           
            if (res) {
              let screenWidth = 1000 //容器大小
              const divs = renderOfd(screenWidth, res[0])
              let contentDiv = document.getElementById('divId')
              contentDiv.innerHTML = '' 
              for (const div of divs) {
                contentDiv.appendChild(div)
              }
              
            }
          },
          fail(error) {
            console.log(error, 'errror')
          }
        })
}  
//接口这么写也可以
import axios from 'axios'
 const request = axios.create()
 let url = 'xx//xxxxx/xxxx'
 let res = new request({url, method: 'get', params: {key: xxxx, key1: xxxx}, responseType: 'blob', headers: { uiticket: getToken(), sid: getSid() }})

如果有熟练使用ofd各种前端功能的同志可以发消息教教我。