点击文件实现WPS工具预览功能
2024-05-11 17:56:59
页面如图：
需要点击对应文件名弹窗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.dwmcpara['realname'] = this.$route.query.realnameconsole.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文件如下：直接复制就可以使用
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).WPS={})}(this,function(e){"use strict";var t,n,o=function(){return(o=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)},r=function(){function e(){}return e.add=function(t){e._handleList.push(t),window.addEventListener("message",t,!1)},e.remove=function(t){var n=e._handleList.indexOf(t);n>=0&&e._handleList.splice(n,1),window.removeEventListener("message",t,!1)},e.empty=function(){for(;e._handleList.length;)window.removeEventListener("message",e._handleList.shift(),!1)},e.parse=function(e){return"object"==typeof e?e:JSON.parse(e)},e._handleList=[],e}();!function(e){e.unknown="unknown",e.spreadsheet="s",e.writer="w",e.presentation="p",e.pdf="f"}(t||(t={})),function(e){e.wps="w",e.et="s",e.presentation="p",e.pdf="f"}(n||(n={}));var i,a,p,s,c,u,d,f=(i=0,function(){return++i}),l=(a=null,function(e,t){if(!a){a=document.createElement("iframe");var n={id:"wps-iframe",src:e,scrolling:"no",frameborder:"0",allowfullscreen:"allowfullscreen",webkitallowfullscreen:"true",mozallowfullscreen:"true"};for(var o in n)a.setAttribute(o,n[o]);t?t.appendChild(a):document.body.appendChild(a),a.destroy=function(){a.parentNode.removeChild(a),a=null}}return a}),m=function(e){l().contentWindow.postMessage(JSON.stringify(e),"*")},v=function(e){return new Promise(function(t){var n=f();e.type=w();var o=function(e){var i=r.parse(e.data);"wps.api.reply"===i.eventName&&i.msgId===n&&(t(i.data),r.remove(o))};r.add(o),m({eventName:"wps.jssdk.api",data:e,msgId:n})})},y=function(e){var t=o({},e),n=t.headers,r=void 0===n?{}:n,i=t.subscriptions,a=void 0===i?{}:i,p=(t.wpsUrl,r.backBtn),s=void 0===p?{}:p,c=r.shareBtn,u=void 0===c?{}:c,d=r.otherMenuBtn,f=void 0===d?{}:d,l=function(e,t){e.subscribe&&"function"==typeof e.subscribe&&(e.callback=t,a[t]=e.subscribe,delete e.subscribe)};if(l(s,"wpsconfig_back_btn"),l(u,"wpsconfig_share_btn"),l(f,"wpsconfig_other_menu_btn"),f.items&&Array.isArray(f.items)){var m=[];f.items.forEach(function(e,t){switch(void 0===e&&(e={}),e.type){case"export_img":e.type=1,e.callback="export_img";break;case"export_pdf":e.type=1,e.callback="export_pdf";break;case"save_version":e.type=1,e.callback="save_version";break;case"about_wps":e.type=1,e.callback="about_wps";break;case"split_line":e.type=2;break;case"custom":e.type=3,l(e,"wpsconfig_other_menu_btn_"+t),m.push(e)}}),m.length&&(b||F)&&(f.items=m)}if("object"==typeof a.print){var v="wpsconfig_print";"function"==typeof a.print.subscribe&&(a[v]=a.print.subscribe,t.print={callback:v},void 0!==a.print.custom&&(t.print.custom=a.print.custom)),delete a.print}"function"==typeof a.exportPdf&&(a[v="wpsconfig_export_pdf"]=a.exportPdf,t.exportPdf={callback:v},delete a.exportPdf);return o({},t,{subscriptions:a})},w=(p="",function(e){if(void 0===e&&(e=""),!p&&e){var o=e.toLowerCase();-1!==o.indexOf("/office/s/")&&(p=t.spreadsheet),-1!==o.indexOf("/office/w/")&&(p=t.writer),-1!==o.indexOf("/office/p/")&&(p=t.presentation),-1!==o.indexOf("/office/f/")&&(p=t.pdf)}if(!p){var r=e.match(/[\?&]type=([a-z]+)/)||[];p=n[r[1]]||""}return p}),x=window.navigator.userAgent.toLowerCase(),b=/Android|webOS|iPhone|iPod|BlackBerry|iPad/i.test(x),F=function(){try{return-1!==window._parent.location.search.indexOf("from=wxminiprogram")}catch(e){return!1}}();!function(e){e[e.wdExportFormatPDF=17]="wdExportFormatPDF",e[e.wdExportFormatXPS=18]="wdExportFormatXPS"}(s||(s={})),function(e){e[e.wdExportAllDocument=0]="wdExportAllDocument",e[e.wdExportSelection=1]="wdExportSelection",e[e.wdExportCurrentPage=2]="wdExportCurrentPage",e[e.wdExportFromTo=3]="wdExportFromTo"}(c||(c={})),function(e){e[e.wdExportDocumentContent=0]="wdExportDocumentContent",e[e.wdExportDocumentWithMarkup=7]="wdExportDocumentWithMarkup"}(u||(u={})),function(e){e[e.title=1]="title",e[e.tag=2]="tag"}(d||(d={}));var A;!function(e){e[e.xlTypePDF=0]="xlTypePDF",e[e.xlTypeXPS=1]="xlTypeXPS"}(A||(A={}));var P,E,h;!function(e){e[e.ppFixedFormatTypePDF=2]="ppFixedFormatTypePDF",e[e.ppFixedFormatTypeXPS=1]="ppFixedFormatTypeXPS"}(P||(P={})),function(e){e[e.ppPrintAll=1]="ppPrintAll",e[e.ppPrintCurrent=3]="ppPrintCurrent"}(E||(E={})),function(e){e[e.msoFalse=0]="msoFalse",e[e.msoTrue=-1]="msoTrue"}(h||(h={}));var g,k,D=function(){return new Promise(function(e){return k=e})},_=function(e){return"wps.advanced.api.ready"===e||"web_loaded"===e},T=function(e,t){void 0===e&&(e={});r.add(function(n){var o=r.parse(n.data),i=o.eventName,a=void 0===i?"":i,p=o.data,s=void 0===p?null:p,c=o.url,u=void 0===c?null:c;-1===["wps.jssdk.api"].indexOf(a)&&("ready"===a&&(m({eventName:"setConfig",data:e}),g.tokenData&&m({eventName:"setToken",data:g.tokenData}),k(),g.iframeReady=!0),_(a)&&S(),"function"==typeof t[a]&&t[a](g,u||s))})},S=function(){var e=w(g.url);e===t.writer&&function(e){e.WpsApplication=function(){return{ActiveDocument:{ExportAsFixedFormatAsync:function(e){var t={api:"WpsApplication().ActiveDocument.ExportAsFixedFormatAsync",args:o({ExportFormat:s.wdExportFormatPDF,Range:c.wdExportAllDocument,From:1,To:1,Item:u.wdExportDocumentWithMarkup,IncludeDocProps:!0},"object"==typeof e?e:{})};return v(t)},ImportDataIntoFieldsAsync:function(e){var t={api:"WpsApplication().ActiveDocument.ImportDataIntoFieldsAsync",args:{Data:e.Data,Options:e.Options}};return v(t)}},Enum:o({},s,c,u)}}}(g),e===t.spreadsheet&&function(e){e.EtApplication=function(){return{ActiveWorkbook:{ExportAsFixedFormatAsync:function(e){var t={api:"EtApplication().ActiveWorkbook.ExportAsFixedFormatAsync",args:o({Type:A.xlTypePDF,IncludeDocProps:!0},"object"==typeof e?e:{})};return v(t)},ActiveSheet:{ExportAsFixedFormatAsync:function(e){var t={api:"EtApplication().ActiveWorkbook.ActiveSheet.ExportAsFixedFormatAsync",args:o({Type:A.xlTypePDF,IncludeDocProps:!0},"object"==typeof e?e:{})};return v(t)}}},Enum:o({},A)}}}(g),e===t.presentation&&function(e){e.WppApplication=function(){return{ActivePresentation:{ExportAsFixedFormatAsync:function(e){var t={api:"WppApplication().ActivePresentation.ExportAsFixedFormatAsync",args:o({FixedFormatType:P.ppFixedFormatTypePDF,RangeType:E.ppPrintAll,FrameSlides:h.msoTrue},"object"==typeof e?e:{})};return v(t)}},Enum:o({},P,E)}}}(g)};console.log("WPS WebOffice JS-SDK V1.0.9"),e.config=function(e){void 0===e&&(e={}),g&&g.destroy();try{var t,n=y(e),i=n.wpsUrl,a=n.subscriptions,p=void 0===a?{}:a,s=n.mount,c=l(i,void 0===s?null:s);return delete n.mount,delete n.wpsUrl,delete n.subscriptions,D(),g={url:i,version:"1.0.9",iframe:c,Enum:o({},h),iframeReady:!1,tokenData:null,setToken:function(e){g.tokenData=e,g.iframeReady&&m({eventName:"setToken",data:e})},ready:function(){return t||(t=new Promise(function(e){var t=function(n){var o=r.parse(n.data).eventName;_(o)&&(e(),r.remove(t))};r.add(t)}))},destroy:function(){c.destroy(),r.empty(),g=null},save:function(){return v({api:"save"})}},T(n,p),g.ready(),g}catch(e){console.error(e)}},Object.defineProperty(e,"__esModule",{value:!0})});二、在路由配置文件中，增加页面
{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.userIdconst fileType= row.fileTypeconst 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;
}
点击文件实现WPS工具预览功能相关推荐
- 接入wps实现预览功能
接入wps实现预览功能 1:wps官网地址:https://open.wps.cn/docs/wwo/access/sdk-demo 选择下载对应的开发语言DEMO(需要注册,并生成文档预览) 2:拿 ...
- 文档文件等网页端预览功能
要实现word.ppt.excel.pdf等文档在web应用端预览功能,目前一般做法为: 在页面的显示效果: 主要用的工具: Openoffice4(windows.linux):SWFTools ...
- Office文件转化PDF实现预览功能
OpenOffice文件转PDF 实测有用 OpenOffice办公文件预览功能 OpenOffice操作 aspose-words来实现预览 预览操作 OpenOffice办公文件预览功能 Hell ...
- SpringBoot实现服务器PDF文件的下载和预览功能
- php案例 文件上传并预览
作者:陈业贵 华为云享专家 51cto(专家博主 明日之星 TOP红人) 阿里云专家博主 文章目录 前言 代码 cyg.php 2.php 效果:也就是上传的文件里面的内容 前言 php案例 文件上传 ...
- 快速实现word、excel、ppt、txt等办公文件在线预览功能（Java版）
点击关注公众号,实用技术文章及时了解 来源:blog.csdn.net/weixin_40986713/ article/details/109527294 java实现办公文件在线预览功能是一个大家 ...
- 文献管理软件//Zotero的常用插件——Sci-hub/shortdoi批量下载、Zotfile重命名PDF文件及ZoteroQuickLook快速预览（二）
Zotero|方便好用的插件 一. Zotfile|文件重命名 1.1 Zotfile下载 1.2 Zotfile安装 1.3 Zotfile配置 1.4 Zotfile重命名文件 二. QuickL ...
- php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
- Cordova实现自定义下载插件和WPS在线预览
Cordova实现自定义下载插件和WPS在线预览 简要描述 点击下载链接,请求URL,判断手机是否安装WPS,如果安装则调用wps在线编辑,没有安装则对文件进行下载,并在通知栏进行通知,显示下载进度( ...
- 表格图片预览_Mac预览工具使用技巧,Mac预览功能实用技巧大全
Mac预览怎么用?有很多的用户以为Mac自带的预览功能只具有简单的图片浏览功能,其实不然,其实"预览"是一款强大的看图.修图.改图软件,也同时是一款多功能的 PDF 阅读与编辑工具 ...
最新文章
- 如何在CPU上优化GEMM矩阵乘法
- 哈啰程序员吐槽：试用期带5个人创造了部门历史最高成绩，结果却被辞退
- 实心和空心哪个抗弯能力强_空心砖4大优缺点一次看 便宜耐用营造大自然原始风...
- 2022年全球及中国脂肪酸氯化物行业专项可行性与供需前景调研报告
- IO多路复用的三种机制Select，Poll，Epoll
- 如何使用recaptcha_在Spring MVC Web应用程序中使用reCaptcha
- python windows窗口置顶_想用Python编程却不知如何下手？一篇搞定编程准备工作
- 数据库索引如何工作？原理
- 大数据之-Hadoop3.x_MapReduce_序列化案例FlowReducer---大数据之hadoop3.x工作笔记0099
- SQL Server数据库的兼容级别：错误;找不到xxxx对象
- 2017-2018-2 1723《程序设计与数据结构》第九周作业 第二周结对编程 总结
- 10个在工作中常用的表格函数
- 枚举——数组中的最长山脉
- js 获取到number的length
- 008产品设计的思考（创造思维+用户体验+用户画像+用户群体）
- CRM客户关系管理：赢得和留住客户的指南
- Android UI美化基本
- 你的压力狗狗懂，通过闻味就知道！英国学者做实验论证，专门收集人做数学题时的气味...
- Uncle小说4.0 全网小说免费下载
- windows系统进入bios