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

最新推荐文章于 2024-07-27 10:19:55 发布

指标满载

最新推荐文章于 2024-07-27 10:19:55 发布

阅读量5.3k

点赞数 3

文章标签： WPS文件预览

本文链接：https://blog.csdn.net/weixin_44770377/article/details/107089352

版权

该博客介绍了如何在项目中实现点击文件触发WPS预览功能，包括在组件文件夹中创建api.js、index.vue和jwps.js文件，调整路由配置，以及设置点击事件来跳转到WPS预览页面。

摘要由CSDN通过智能技术生成

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

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

在这里插入图片描述
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文件如下：直接复制就可以使用