ODF格式在线预览

发表于 | 分类于
  • 安装依赖: npm i odf.js
  • vue文件直接使用
1
2
3
<div style="display:flex;justify-content: center;">
   <div id="certificateWrapper" style="text-align: center"></div>
</div>
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
<script setup lang="ts">
import { parseOfdDocument, renderOfd } from 'ofd.js'

// 获取电子证照
async function getPersonLicenseFile() {
  const res = await getPersonLicenseFileApi({
    params: {
        certificateIdentifier:props.rowData.certificateIdentifier
    }
  })
  if (res?.data) {
    parseOfdDocument({
      // ofd写入文件地址
      ofd: `data:image/${res?.data?.fileFormat};base64,${res?.data.content}`,
      success(res) {
        // 输出ofd每页的div
        const screenWidth = 350
        const contentObj = renderOfd(screenWidth, res[0])
        const contentDiv: any = document.getElementById('certificateWrapper')
        contentDiv.innerHTML = ''
        for (const div of contentObj) {
          contentDiv.appendChild(div)
        }
      },
      fail(error) {
        console.log(error)
      }
    })
  } else {
    root.$message.warning('尚未生成电子证书，请稍后再试')
  }
  loading.value = false
}
</script>