ofd后缀的文件预览,路径预览，上传预览，下载预览

npm install ty-ofd.js

<template>
  <div>
    <input
      ref="file"
      type="file"
      class="hidden"
      accept=".ofd"
      @change="fileChanged"
    >
    <div id="content" class="content_wrap">
      <div class="seal_img_div" />
    </div>
  </div>

</template>

<script>
import { parseOfdDocument, renderOfd } from 'ty-ofd.js'
export default {
  props: {
    fileurl: {
      type: String,
      default:
        'http://192.168.0.115:9527/train.ofd'
    },
    screenWidth: {
      type: Number,
      default: 600
    }
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {
    // 直接预览ofd文件
    this.renderOfdFile(this.fileurl)
  },
  methods: {
    /**
     * 选择文件上传
     */
    fileChanged() {
      const file = this.$refs.file.files[0]
      this.renderOfdFile(file)
    },
    /**
     * ofd格式文件渲染
     */
    renderOfdFile(file) {
      const that = this
      parseOfdDocument({
        ofd: file, // file 可以为文件链接、上传的文件对象
        success(res) {
          // 输出ofd每页的div
          const divs = renderOfd(that.screenWidth, res[0])
          const contentDiv = document.getElementById('content')
          contentDiv.innerHTML = ''
          for (const div of divs) {
            contentDiv.appendChild(div)
          }
          for (const ele of document.getElementsByName('seal_img_div')) {
            this.addEventOnSealDiv(
              ele,
              JSON.parse(ele.dataset.sesSignature),
              JSON.parse(ele.dataset.signedInfo)
            )
          }
        },
        fail(error) {
          console.log(error)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>

<div v-if="isOFD === true" id="ofdveri" />
renderOfdFile(file) {
      const that = this
      parseOfdDocument({
        ofd: file, // file 可以为文件链接、上传的文件对象
        success(res) {
          // 输出ofd每页的div
          const divs = renderOfd(that.screenWidth, res[0])
          const contentDiv = document.getElementById('ofdveri')
          contentDiv.innerHTML = ''
          for (const div of divs) {
            contentDiv.appendChild(div)
          }
        },
        fail(error) {
          console.log(error)
        }
      })
    },
imgshow(){
              downloadFileByUniq(
                encodeURIComponent(data.name)
              ).then(res => {
                const file = new File([res], data.name)
                this.isOFD = true
                this.renderOfdFile(file)
              }).finally(() => {
                this.imgLoading = false
              })
        }