点击文件实现WPS工具预览功能

客官°小女子只卖身不卖艺 2023-02-22 08:24 90阅读 0赞

页面如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
需要点击对应文件名弹窗WPS文件预览页面，效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]

## 一、首先在组件文件夹中建立如下文件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 3]  
api.js文件如下：需与后端联调

import request from '@/router/axios'
    
    
    // 一键生成
    export const hybgxxJsbg = (query) => {
      return request({
        url: '/swbj/hybgxx/jsbg',
        method: 'post',
        data: query
      })
    }
    
    // 下载
    export const officeUrl = (name) => {
      return request({
        url: '/wbjk/weboffice/url?_w_fname=' + name,
        method: 'get'
      })
    }

index.vue文件如下：页面中使用了api文件中的两个接口，需后端提供联调使用

<template>
      <div>
      </div>
    </template>
    
    <script>
      import { hybgxxJsbg,officeUrl } from  './api'
      import './jwps.js'
    
        export default {
          name: "index",
          data() {
            return {
              bgnr: ''
            }
          },
          created(){
              if (this.$route.query.ids) {
                let para = {}
                para['ids'] = JSON.parse(this.$route.query.ids)
                para['flfgIds'] = JSON.parse(this.$route.query.flfgIds)
                para['dwmc'] = this.$route.query.dwmc
                para['realname'] = this.$route.query.realname
                console.log(para,'para')
                console.log(this.$route,'this.$route')
                hybgxxJsbg(para).then(res=>{
                  this.$message.success('生成成功!请等待加载...')
                  this.bgnr = res.data.data.bgnr.split('fw-')[1]
                  this.openFile()
                })
              }else {
                this.bgnr = this.$route.query.bgnr.split('fw-')[1]
                this.openFile()
              }
          },
          mounted(){ },
          methods:{
            openFile() {
              officeUrl(this.bgnr).then(res=>{
                let wps = WPS.config({wpsUrl: res.data.wpsUrl});
                wps.setToken({token: res.data.token});
                window.setTimeout(function() {
                  let div = document.getElementById('wps-iframe')
                  div.style.width = '100%'
                  div.style.height = '100%'
                }, 2000)
              })
            }
          },
        }
    </script>
    
    <style>
      html{
        overflow: hidden;
      }
    </style>

jwps.js文件如下：直接复制就可以使用

## 二、在路由配置文件中，增加页面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 4]

{
        path: '/viewReport',
        name: '查看文件',
        component: () => import('@/components/wps-components/index')
      }

## 三、点击跳转WPS页面事件 ##

//点击事件
    cellClick(row, column, cell, event){
    	if(this.validShow(row)){
           addReadOrDown({fileId:row.id,type:1}).then(res=>{
    	        let team = this.$router.resolve({path:'/viewReport' ,query:{ids: '', bgnr: 'lsfw-'+row.fileUrl.split('lsfw/')[1]}})
    	        window.open(team.href,'_blank')
    	   })
        };
    },
    //文件格式判断，不是这些格式的话，WPS无法预览，会404
    validShow(row){
      const isUser=  row.createUser==this.userInfo.userId
      const fileType=  row.fileType
      const isFile =
          fileType === "doc" ||
          fileType === "dot" ||
          fileType === "wps" ||
          fileType === "wpt" ||
          fileType === "docx" ||
          fileType === "docm"||
          fileType === "dotm" ||
          fileType === "xls" ||
          fileType === "xlt" ||
          fileType === "et" ||
          fileType === "xlsx" ||
          fileType === "xltx" ||
          fileType === "xlsm" ||
          fileType === "xltm" ||
          fileType === "ppt" ||
          fileType === "pptx" ||
          fileType === "pptm" ||
          fileType === "ppsx" ||
          fileType === "ppsm" ||
          fileType === "pps" ||
          fileType === "potx" ||
          fileType === "dpt" ||
          fileType === "dps" ||
          fileType === "pdf"
      return isUser&&isFile;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070217390058.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200702173951598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020070217400472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200702173331640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200702173819265.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200702175400792.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70