若依ruoyi系统docx的下载及预览_基于若依ruoyi的文档管理系统

下载：

        方法一：使用标签<a>链接

<el-button  
  icon="el-icon-download"
  @click="handleDownload(scope.row)"
>下载
</el-button>
 
handleDownload(row) {
      var name = row.contractTemplateName
      var url = row.contractTemplateFile
      var suffix = url.substring(url.lastIndexOf('.'), url.length)
      const a = document.createElement('a')
      a.setAttribute('download', name + suffix)
      a.setAttribute('target', '_blank')
      a.setAttribute('href', 'http://localhost/dev-api' + url)
      a.click()
    }

       方法二：后端下载方法.......

预览：

        预览插件

           可使用的插件或系统有：vue-office/docx-preview/kkFileView
           前端插件匹配文件预览：有两个思路，一个将blob流转成对应的文件格式，再进行预览。另一个是将文件地址映射出来，然后通过浏览器进行访问。两种方式各有优缺点，blob流方式相对于本地测试，部署到服务器时可能会出现文件流传输速度问题，如果是内网使用，速度还可以接收，但是外网使用，预览速度根本无法接收。因相当于下载完文件后，再进行预览，所以速度很慢。浏览器打开方式只支持浏览器支持预览的文件，很多文件格式不支持。

        vue-office

         笔者使用的是vue-office 附叶继增大佬开源链接：vue-office: 支持word(.docx)、excel(.xlsx)、pdf等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3https://api.gitee.com/ye-jizeng/vue-office

         安装：

npm install @vue-office/docx vue-demi

         使用：

<template>
  <vue-office-docx :src="docx" @rendered="rendered"/>
</template>
 
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
 
export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

        跳转至新界面

         配置路由  

          /src/router/index

{
    path: '/contract/preview', //对应方法中push的path
    component: Layout,
    hidden: true, 
    permissions: ['contract:template:list'], //动态权限路由一定不能省会报404
    children: [
      {
        path: '',
        component: () => import('@/views/contract/template/data'),//标签页地址
        name: 'Data',
        meta: { title: '合同模板预览', activeMenu: '/system/dict' }
      }
    ]
  },

        跳转 

         方法一：使用方法

<el-button
  @click="handlePreview(scope.row)"
  >预览
</el-button>
 
/** 预览按钮操作 */
    handlePreview(row){
      this.$router.push({
        path:"/contract/preview",
        query:{
          id:row.contractTemplateId
        }
      })
    },

         若路由配置符合ruoyi规范则会在系统内新开tab,否则会在浏览器中新打开标签页

        方法二：使用组件

 
  <template slot-scope="scope">
     <router-link :to="'/contract/preview/' + scope.row.contractTemplateId">
        预览
     </router-link>
  </template>