1.下载依赖包，导入ofd.js

import { parseOfdDocument, renderOfd } from 'ofd.js'

2、使用组件渲染页面

         <div id="stampTK"></div>


        parseOfdDocument({
          // ofd写入文件地址
          ofd: event.raw,（上传流数据或者接口地址）
         // ofd写入文件地址
         //ofd: process.env.VUE_APP_BASE_API + '/LicenseInformation/minePdfDownloadOFD?id=' + id,
          success(res) {
            //输出ofd每页的div
            if (res) {
              let screenWidth = 1600 //设置内容的显示框大小
              const divs = renderOfd(screenWidth, res[0])//将流数据渲染给接受的div盒子
              let contentDiv = document.getElementById('stampTK')// 获取盒子元素
              contentDiv.innerHTML = '' //进来先清空，防止上一条数据未被销毁
              for (const div of divs) {
                contentDiv.appendChild(div)
              }
            }
          },
          fail(error) {
            that.loadingLicence = false
          }
        })

3、上传预览

      <el-upload
           ref="upload"
           accept=".ofd"
           :action="uploadLicenceZ.urlZ"
           :headers="uploadLicenceZ.headers"
           :on-change="pdfZSaveToUrl"
           :on-success="handleFileSuccessZ"
           :show-file-list="false"
       >
         <el-button type="primary" size="mini">上传</el-button>
      </el-upload>


      uploadLicenceZ: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        urlZ: process.env.VUE_APP_BASE_API + '/licenseFileRecord/upload'
      },

        
    // 上传预处理
    pdfZSaveToUrl(event) {
      let that = this
      let ext = event.raw.name.replace(/.+\./, '')
      // if (event.raw.type.indexOf('application/') == -1) {
      if (['ofd'].indexOf(ext) === -1) {
        this.msgError('文件格式错误，请正确文件类型,如：.ofd后缀的文件')
      } else {
        this.loadingLicence = true
        parseOfdDocument({
          // ofd写入文件地址
          ofd: event.raw,
          success(res) {
            //输出ofd每页的div
            if (res) {
              let screenWidth = 1600
              const divs = renderOfd(screenWidth, res[0])
              let contentDiv = document.getElementById('stampCKZ')
              contentDiv.innerHTML = ''
              for (const div of divs) {
                contentDiv.appendChild(div)
              }
            }
          },
          fail(error) {
            that.loadingLicence = false
          }
        })
      }
    },
    //上传的成功回调
    handleFileSuccessZ(res, file) {
      if (res.code == 200) {
        this.$nextTick(() => {
          this.visibleStampCK = true
        })
        this.SignUrlZ = res.url
        // this.$message.success('上传成功')
        // this.openSuccess()
        this.$alert('上传成功', '成功提示', {
          confirmButtonText: '确定',
          callback: (action) => {}
        })
      } else {
        this.openFail()
      }
    },

4、下载ofd文件

window.location.href = process.env.VUE_APP_BASE_API + '/profile/pdfTempPath/' + this.businessId + 'N.ofd'

5、解决同时一个方法下载两个文件的方法

  //setTimeout会有四毫秒延迟，让两个window.location.href做出时间差相继下载页面
setTimeout(() => {
          window.location.href = process.env.VUE_APP_BASE_API + '/profile/pdfTempPath/' + this.businessId + 'P.ofd'
        }, 0)
        setTimeout(() => {
          window.location.href = process.env.VUE_APP_BASE_API + '/profile/pdfTempPath/' + this.businessId + 'N.ofd'
        }, 1000)