diff --git a/src/utils/common.js b/src/utils/common.js
index f01b0a2..7106a25 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -30,10 +30,10 @@ export default {
     })
   },
   /**
-   * 预览原始资料
-   * 如果给的是路径就直接预览，如果给的是任务ID，就先查询路径再预览
-   * @param id  任务ID
-   */
+     * 预览原始资料
+     * 如果给的是路径就直接预览，如果给的是任务ID，就先查询路径再预览
+     * @param id  任务ID
+     */
   viewRawRecords(id) {
     preview({
       url: '/download/pullRawRecordsPath',
@@ -53,9 +53,9 @@ export default {
     })
   },
   /**
-   * 预览相关鉴证文件
-   * @param id 文件主键
-   */
+     * 预览相关鉴证文件
+     * @param id 文件主键
+     */
   viewProve(id) {
     preview.defaults.withCredentials = true
     preview({
@@ -73,10 +73,10 @@ export default {
     })
   },
   /**
-   *  预览驳回附件
-   *  @param id 驳回记录主键
-   * @param fileName 驳回附件名称
-   */
+     *  预览驳回附件
+     *  @param id 驳回记录主键
+     * @param fileName 驳回附件名称
+     */
   viewReject(id, fileName) {
     if (id && fileName && fileName !== '') {
       const suffixName = fileName.substring(fileName.indexOf('.'))
@@ -151,11 +151,12 @@ export default {
       console.info('重新生成成功')
     })
   },
+
   /**
-   * 检验员签名方法
-   * @param {*} id ： 原始记录/报告主键
-   * @param {*} jyry ：检验人员
-   */
+     * 检验员签名方法
+     * @param {*} id ： 原始记录/报告主键
+     * @param {*} jyry ：检验人员
+     */
   signName(id, jyry) {
     if (!id) {
       return
@@ -189,15 +190,15 @@ export default {
     return chineseName
   },
   /**
-   * 删除检验方案
-   * @param jyxm  检验项目简写。例如：bhcd
-   * @param jianyanxiangmu  检验项目。例如：壁厚测定
-   * @param bglx  报告类型。例如：[2, 3]
-   * @param ysjlId 无损或分项的原始记录Id
-   * @param mainYsjlId  主原始记录Id
-   * @param sblbdm  设备类别代码。例如：2100
-   * @param nblb  内部类别。例如：DQ
-   */
+     * 删除检验方案
+     * @param jyxm  检验项目简写。例如：bhcd
+     * @param jianyanxiangmu  检验项目。例如：壁厚测定
+     * @param bglx  报告类型。例如：[2, 3]
+     * @param ysjlId 无损或分项的原始记录Id
+     * @param mainYsjlId  主原始记录Id
+     * @param sblbdm  设备类别代码。例如：2100
+     * @param nblb  内部类别。例如：DQ
+     */
   delJyfa(jyxm, jianyanxiangmu, bglx, ysjlId, mainYsjlId, sblbdm, nblb) {
     api({
       url: '/ysjl/delJyfa',
@@ -216,13 +217,12 @@ export default {
         message: '删除成功',
         type: 'success'
       })
-    }).catch(e => {
-    })
+    }).catch(e => {})
   },
   /**
-   * 下载导入模板
-   * @param templateName  例如：模板名字.xlsx
-   */
+     * 下载导入模板
+     * @param templateName  例如：模板名字.xlsx
+     */
   downloadTemplate(templateName) {
     if (!templateName) {
       Vue.prototype.$message({
@@ -242,12 +242,12 @@ export default {
     })
   },
   /**
-   * 上传数据
-   * @param file  上传的文件信息
-   * @param tableData 上传前的数据
-   * @returns {boolean}
-   * @constructor
-   */
+     * 上传数据
+     * @param file  上传的文件信息
+     * @param tableData 上传前的数据
+     * @returns {boolean}
+     * @constructor
+     */
   uploadTableData(file, tableData) {
     const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
     const isExcel2 = file.name.endsWith('.xls') || file.name.endsWith('.xlsx')
@@ -280,10 +280,10 @@ export default {
     })
   },
   /**
-   * 深拷贝
-   * @param o
-   * @returns {Array|*}
-   */
+     * 深拷贝
+     * @param o
+     * @returns {Array|*}
+     */
   deepCopy(o) {
     if (o instanceof Array) {
       var n = []
@@ -302,9 +302,9 @@ export default {
     }
   },
   /**
-   * 根据报告ID查看驳回原因
-   * @param ysjlId
-   */
+     * 根据报告ID查看驳回原因
+     * @param ysjlId
+     */
   viewRejection(ysjlId) {
     api({
       url: '/taskinfo/viewRejection',
@@ -323,9 +323,9 @@ export default {
     })
   },
   /**
-   * 下载无损分项附件
-   * @param renwuId
-   */
+     * 下载无损分项附件
+     * @param renwuId
+     */
   downloadWsFxFile(renwuId) {
     preview({
       url: '/download/pullWsFxFilePath',
@@ -340,8 +340,8 @@ export default {
     })
   },
   /**
-   * 判断日期格式是否为yyyy-MM-dd
-   * */
+     * 判断日期格式是否为yyyy-MM-dd
+     * */
   checkDateFormat(checkDate) {
     if (checkDate !== null) {
       checkDate = checkDate.replace(/\s+/g, '').replace('00:00:00', '').replace('年', '-').replace('月', '-').replace('日', '')
@@ -353,8 +353,8 @@ export default {
     return checkDate
   },
   /**
-   * 删除当前路由
-   */
+     * 删除当前路由
+     */
   delCurrentViews() {
     store.dispatch('delCurrentViews', {
       view: router.history.current,
@@ -362,11 +362,11 @@ export default {
     })
   },
   /**
-   * 构建编辑原始记录页面路由参数
-   * @param ysjl
-   * @param obj   需要将特殊参数补充到路由的参数里面
-   * @returns {{modelId: null, departmentId: *, renwuId: null, sbzldm, sbpzdm, jyxm: null, jylb: *, sblbdm, id: null, state: null, neibuleibie, jianyanrenyuan: null}}
-   */
+     * 构建编辑原始记录页面路由参数
+     * @param ysjl
+     * @param obj   需要将特殊参数补充到路由的参数里面
+     * @returns {{modelId: null, departmentId: *, renwuId: null, sbzldm, sbpzdm, jyxm: null, jylb: *, sblbdm, id: null, state: null, neibuleibie, jianyanrenyuan: null}}
+     */
   buildEditYsjlRouterParam(ysjl, obj) {
     const routerParam = {
       id: ysjl.id,
@@ -390,29 +390,29 @@ export default {
     return routerParam
   },
   /**
-   * 重新加载页面到更新报检单页面
-   * @param bjd
-   */
+     * 重新加载页面到更新报检单页面
+     * @param bjd
+     */
   reloadViewToUpdateBjd(bjd) {
     this.delCurrentViews()
     router.push({ path: '/bjd/bjd-' + bjd.jianyanleibie.toLowerCase() + '-input/' + bjd.id + '/' + bjd.shebeizhongleidaima + '/update' })
   },
   /**
-   * 重新加载页面到更新原始记录页面
-   * @param ysjl
-   * @param obj   需要将特殊参数补充到路由的参数里面
-   */
+     * 重新加载页面到更新原始记录页面
+     * @param ysjl
+     * @param obj   需要将特殊参数补充到路由的参数里面
+     */
   reloadViewToUpdateYsjl(ysjl, obj) {
     const path = router.history.current.path.replace('/null', '/' + ysjl.id)
     this.delCurrentViews()
     router.push({ path: path, query: this.buildEditYsjlRouterParam(ysjl, obj) })
   },
   /**
-   * 记录、报告编号判重
-   * @param bianhao
-   * @param id
-   * @returns {Promise<unknown>}
-   */
+     * 记录、报告编号判重
+     * @param bianhao
+     * @param id
+     * @returns {Promise<unknown>}
+     */
   judgeRepeat(bianhao, id) {
     return new Promise(resolve => {
       api({
@@ -443,11 +443,11 @@ export default {
     })
   },
   /**
-   * 根据原始记录id查询参数
-   * @param ysjlId
-   * @param sbzldm
-   * @returns {AxiosPromise}
-   */
+     * 根据原始记录id查询参数
+     * @param ysjlId
+     * @param sbzldm
+     * @returns {AxiosPromise}
+     */
   getParam(ysjlId, sbzldm) {
     return api({
       url: '/ysjl/getParamByYsjlId',
@@ -459,12 +459,12 @@ export default {
     })
   },
   /**
-   * 获取检验项目
-   * @param modelId 模板主键（起草时使用）
-   * @param ysjlId  原始记录主键（更新时使用）
-   * @param sort    序号
-   * @returns {AxiosPromise}
-   */
+     * 获取检验项目
+     * @param modelId 模板主键（起草时使用）
+     * @param ysjlId  原始记录主键（更新时使用）
+     * @param sort    序号
+     * @returns {AxiosPromise}
+     */
   getJyxm(modelId, ysjlId, sort, state) {
     let url = ''
     let data = {}
@@ -489,22 +489,22 @@ export default {
     })
   },
   /**
-   *  精确乘法
-   * @param arg1 乘数
-   * @param arg2 被乘数
-   * @param decimalPlaces    保留的小数位数
-   * @returns {number}
-   */
+     *  精确乘法
+     * @param arg1 乘数
+     * @param arg2 被乘数
+     * @param decimalPlaces    保留的小数位数
+     * @returns {number}
+     */
   accMul(arg1, arg2, decimalPlaces = 2) {
     const percentage = Math.pow(10, decimalPlaces)
     return Math.round(arg1 * arg2 * percentage) / percentage
   },
   /**
-   * 精确加法
-   * @param arg1
-   * @param arg2
-   * @returns {number}
-   */
+     * 精确加法
+     * @param arg1
+     * @param arg2
+     * @returns {number}
+     */
   accAdd(arg1, arg2) {
     let r1, r2, m, c
     try {
@@ -537,10 +537,10 @@ export default {
     return (arg1 + arg2) / m
   },
   /**
-   * 删除数组中指定元素
-   * @param arr 数据
-   * @param val 元素
-   */
+     * 删除数组中指定元素
+     * @param arr 数据
+     * @param val 元素
+     */
   deleteElement(arr, val) {
     for (var i = 0; i < arr.length; i++) {
       if (arr[i] === val) {
@@ -551,10 +551,10 @@ export default {
     return arr
   },
   /**
-   * 修复由于Vue的$on可能会多次绑定，导致多次调用$on的回调方法
-   * @param event
-   * @param callback
-   */
+     * 修复由于Vue的$on可能会多次绑定，导致多次调用$on的回调方法
+     * @param event
+     * @param callback
+     */
   $on(event, callback) {
     Utils.$off(event)
     Utils.$on(event, callback)
diff --git a/src/views/dic/category.vue b/src/views/dic/category.vue
index e43a332..c2b702b 100644
--- a/src/views/dic/category.vue
+++ b/src/views/dic/category.vue
@@ -106,15 +106,15 @@
           <div slot="header" class="clearfix">
             <span>字典详情</span>
           </div>
-                          <el-button
-                  type="danger"
-                  icon="el-icon-delete"
-                  @click="deleteCategoryDetail"
-                  v-if="list.length > 0"
-                  style="margin-bottom:20px"
-                >
-                  删除
-                </el-button>
+          <el-button
+            v-if="list.length > 0"
+            type="danger"
+            icon="el-icon-delete"
+            style="margin-bottom:20px"
+            @click="deleteCategoryDetail"
+          >
+            删除
+          </el-button>
           <el-table
             v-if="list.length > 0"
             ref="list"
@@ -261,7 +261,7 @@ export default {
       species: [],
       parentList: [],
       leftList: [],
-      detailSeletArr:[]
+      detailSeletArr: []
     }
   },
   created() {
@@ -294,7 +294,7 @@ export default {
     handleSelectionChange: function(val) {
       this.multipleSelection = val
     },
-    detailHandleSelectionChange(val){
+    detailHandleSelectionChange(val) {
       this.detailSeletArr = val
     },
     showCreate() {
@@ -417,21 +417,21 @@ export default {
     closeDialog() {
       this.species = []
     },
-    deleteCategoryDetail(){
-      if(this.detailSeletArr.length==0){
-       return this.$message.warning('请选择数据')
+    deleteCategoryDetail() {
+      if (this.detailSeletArr.length === 0) {
+        return this.$message.warning('请选择数据')
       }
       this.api({
-        url:'/category/delete',
-        method:'delete',
-        params:{
-          integers:this.detailSeletArr.map(item=>item.id)
+        url: '/category/delete',
+        method: 'delete',
+        params: {
+          integers: this.detailSeletArr.map(item => item.id)
         },
         paramsSerializer: function(params) {
           return qs.stringify(params, { indices: false })
         }
-      }).then(res=>{
-                this.$message({ message: '成功删除', type: 'success' })
+      }).then(res => {
+        this.$message({ message: '成功删除', type: 'success' })
       })
     },
     formatSpecies(row, column, cellValue) {
diff --git a/src/views/document/index.vue b/src/views/document/index.vue
index e661f93..0672e87 100644
--- a/src/views/document/index.vue
+++ b/src/views/document/index.vue
@@ -34,16 +34,9 @@
       :columns="columns"
       :crud="crud"
     >
-      <el-table-column
-        slot="operation"
-        align="center"
-        width="200"
-        label="操作"
-      >
+      <el-table-column slot="operation" align="center" width="200" label="操作">
         <template slot-scope="scope">
-          <el-button type="text" @click="downLoad(scope.row)">
-            预览
-          </el-button>
+          <el-button type="text" @click="downLoad(scope.row)"> 预览 </el-button>
           <el-button type="text" @click="downLoadFn(scope.row)">
             下载
           </el-button>
@@ -56,13 +49,27 @@
     <pagination />
     <el-dialog title="查看历史版本" :visible.sync="dialogTableVisible">
       <el-table :data="gridData">
-        <el-table-column :formatter="formatterFlowName" property="flowName" label="操作环节" width="80" />
+        <el-table-column
+          :formatter="formatterFlowName"
+          property="flowName"
+          label="操作环节"
+          width="80"
+        />
         <el-table-column property="filename" label="文件名称" />
-        <el-table-column :formatter="formatter.getChineseName" property="createBy" label="创建人" width="100" />
+        <el-table-column
+          :formatter="formatter.getChineseName"
+          property="createBy"
+          label="创建人"
+          width="100"
+        />
         <el-table-column property="createTime" label="创建时间" width="150" />
         <el-table-column label="操作" width="80">
           <template v-slot="scope">
-            <el-button v-if="scope.row.flowName !== 0" type="text" @click="viewHistoryFile(scope.row)">
+            <el-button
+              v-if="scope.row.flowName !== 0"
+              type="text"
+              @click="viewHistoryFile(scope.row)"
+            >
               预览
             </el-button>
           </template>
@@ -79,157 +86,186 @@
 </template>
 
 <script>
-import CRUD, { header, presenter } from '@/components/Crud/crud'
-import Query from '@/components/Crud/Query'
-import CustomTable from '@/components/Crud/Table'
-import Pagination from '@/components/Crud/Pagination'
-import CrudDocumentArchives from '@/api/document_archives'
-import { uploadFileFn, updateInspectionSystemFile } from '@/api/common'
-import { downloadFileUrl } from '@/utils'
-import download from 'downloadjs'
-import preview from '@/utils/preview'
+import CRUD, { header, presenter } from "@/components/Crud/crud";
+import Query from "@/components/Crud/Query";
+import CustomTable from "@/components/Crud/Table";
+import Pagination from "@/components/Crud/Pagination";
+import CrudDocumentArchives from "@/api/document_archives";
+import { uploadFileFn, updateInspectionSystemFile } from "@/api/common";
+import { downloadFileUrl } from "@/utils";
+import download from "downloadjs";
+import preview from "@/utils/preview";
 
 // crud交由presenter持有
 const defaultCrud = presenter(
   CRUD({
-    title: '检验机构体系文件管理',
-    url: '/inspectionSystemFile/list',
-    orderBy: ['id desc'],
+    title: "检验机构体系文件管理",
+    url: "/inspectionSystemFile/list",
+    orderBy: ["id desc"],
     api: preview,
-    crudMethod: { ...CrudDocumentArchives }
+    crudMethod: { ...CrudDocumentArchives },
   })
-)
+);
 
 export default {
-  name: 'DocumentArchivesList',
+  name: "DocumentArchivesList",
   components: { Pagination, Query, CustomTable },
   mixins: [defaultCrud, header()],
   data() {
     return {
-      action: this.preview.baseURL + '/inspectionSystemFile',
+      action: this.preview.baseURL + "/inspectionSystemFile",
       fileList: [],
       colConfigs: [
-        { prop: 'filename', label: '文件名', align: 'center' },
-        { prop: 'createBy', label: '创建人', align: 'center', formatter: this.formatter.getChineseName },
-        { prop: 'createTime', label: '创建时间', align: 'center' },
-        { prop: 'updateBy', label: '更新人', align: 'center', formatter: this.formatter.getChineseName },
+        { prop: "filename", label: "文件名", align: "center" },
         {
-          prop: 'updateTime',
-          label: '更新时间',
-          align: 'center',
-          formatter: this.formatter.formatterDepartmentName
+          prop: "createBy",
+          label: "创建人",
+          align: "center",
+          formatter: this.formatter.getChineseName,
         },
-        { slot: 'operation' }
+        { prop: "createTime", label: "创建时间", align: "center" },
+        {
+          prop: "updateBy",
+          label: "更新人",
+          align: "center",
+          formatter: this.formatter.getChineseName,
+        },
+        {
+          prop: "updateTime",
+          label: "更新时间",
+          align: "center",
+          formatter: this.formatter.formatterDepartmentName,
+        },
+        { slot: "operation" },
       ],
       permission: {
-        add: ['documentArchives:add'],
-        edit: ['documentArchives:update'],
-        del: ['documentArchives:delete']
+        add: ["documentArchives:add"],
+        edit: ["documentArchives:update"],
+        del: ["documentArchives:delete"],
       },
       dialogTableVisible: false,
       params: {
-        inspectionSystemFileId: '',
+        inspectionSystemFileId: "",
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       gridData: [],
       subTotal: 0,
-      url: process.env.VUE_APP_PREVIEW_API + process.env.VUE_APP_PROJECT_NAME + '/inspectionSystemFile'
-    }
-  },
-  mounted() {
+      url:
+        process.env.VUE_APP_PREVIEW_API +
+        process.env.VUE_APP_PROJECT_NAME +
+        "/inspectionSystemFile",
+    };
   },
+  mounted() {},
   methods: {
     handleRemove(file, fileList) {
-      console.log(file, fileList)
+      console.log(file, fileList);
     },
     handlePreview(file) {
-      console.log(file)
+      console.log(file);
     },
     checkHistory(row) {
-      this.dialogTableVisible = true
-      this.params.inspectionSystemFileId = row.id
-      this.getSubList()
+      this.dialogTableVisible = true;
+      this.params.inspectionSystemFileId = row.id;
+      this.getSubList();
     },
     getSubList() {
       this.preview({
-        url: '/inspectionSystemFileLog/list',
-        method: 'get',
-        params: this.params
-      }).then(res => {
-        this.gridData = res.list
-        this.subTotal = res.total
-      })
+        url: "/inspectionSystemFileLog/list",
+        method: "get",
+        params: this.params,
+      }).then((res) => {
+        this.gridData = res.list;
+        this.subTotal = res.total;
+      });
     },
     handleCurrentChange(val) {
-      this.params.pageNum = val
-      this.getSubList()
+      this.params.pageNum = val;
+      this.getSubList();
     },
     handleExceed(files, fileList) {
       this.$message.warning(
         `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
           files.length + fileList.length
         } 个文件`
-      )
+      );
     },
     // EXCEL上传方法
     beforeUpload(file) {
       if (this.$refs.customTable.$refs.table.selection.length > 1) {
-        this.$notify.warning('请选择单份体系文件进行更新上传！')
-        return false
+        this.$notify.warning("请选择单份体系文件进行更新上传！");
+        return false;
       }
-      const fd = new FormData()
-      fd.append('file', file)
+      const fd = new FormData();
+      fd.append("file", file);
       if (this.$refs.customTable.$refs.table.selection.length) {
-        fd.append('id', this.$refs.customTable.$refs.table.selection[0].id)
+        fd.append("id", this.$refs.customTable.$refs.table.selection[0].id);
         updateInspectionSystemFile(fd).then(() => {
-          this.$notify.success('体系更新成功。')
-          this.crud.toQuery()
-        })
+          this.$notify.success("体系更新成功。");
+          this.crud.toQuery();
+        });
       } else {
         uploadFileFn(fd).then(() => {
-          this.$notify.success('体系上传成功。')
-          this.crud.toQuery()
-        })
+          this.$notify.success("体系上传成功。");
+          this.crud.toQuery();
+        });
       }
-      return false
+      return false;
     },
     downLoad(item) {
-      downloadFileUrl(this.url + '/' + item.id + item.suffix, item.filename, item.suffix)
+      const data = this.url + "/" + item.id + item.suffix;
+      this.$router.push({
+        path:
+          "/preview/document?src=" +
+          this.$store.getters.prodName +
+          "/static/web/viewer.html?file=" +
+          encodeURIComponent(data),
+      });
     },
     viewHistoryFile(item) {
-      downloadFileUrl(this.url + '/' + item.inspectionSystemFileId + '_' + item.id + item.suffix, item.filename, item.suffix)
+      downloadFileUrl(
+        this.url +
+          "/" +
+          item.inspectionSystemFileId +
+          "_" +
+          item.id +
+          item.suffix,
+        item.filename,
+        item.suffix
+      );
     },
     downLoadFn(item) {
-      download(this.url + '/' + item.id + item.suffix)
+      const data = this.url + "/" + item.id + item.suffix;
+      download(data, item.filename);
     },
     beforeRemove(file, fileList) {
-      return this.$confirm(`确定移除 ${file.name}？`)
+      return this.$confirm(`确定移除 ${file.name}？`);
     },
     closeReportDialog() {
-      this.$refs['reportForm'].resetFields()
+      this.$refs["reportForm"].resetFields();
     },
     formatterFlowName(row, column, cellValue) {
       switch (cellValue) {
         case 0:
-          return '保存'
+          return "保存";
         case 1:
-          return '更新'
+          return "更新";
         case 2:
-          return '删除'
+          return "删除";
         default:
-          break
+          break;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style scoped>
-.searchBox{
+.searchBox {
   margin-bottom: 20px;
   display: flex;
 }
-.upload-demo{
+.upload-demo {
   margin-left: 20px;
   width: 200px;
 }
diff --git a/src/views/preview/document.vue b/src/views/preview/document.vue
new file mode 100644
index 0000000..fda25ef
--- /dev/null
+++ b/src/views/preview/document.vue
@@ -0,0 +1,11 @@
+<template>
+  <preview />
+</template>
+
+<script>
+import preview from '@/views/preview/common/index'
+export default {
+  name: 'Document',
+  components: { preview }
+}
+</script>