接入wps实现预览功能

最新推荐文章于 2025-05-10 02:42:08 发布

Aniohevotach

最新推荐文章于 2025-05-10 02:42:08 发布

阅读量4.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： java 文章标签： java

本文链接：https://blog.csdn.net/J_com/article/details/113979830

java 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何接入WPS实现文件预览功能。首先，你需要从WPS官网下载对应开发语言的DEMO并注册获取预览权限。接着，确保预览编辑服务的地址可外网访问。然后，在前端项目中引用DEMO，通过Ajax调用预览文件的方法，传入文件地址。成功后，新窗口将打开显示预览内容。若需要通过JS-SDK传递token鉴权，还需进行相应配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接入wps实现预览功能

1：wps官网地址：https://open.wps.cn/docs/wwo/access/sdk-demo
选择下载对应的开发语言DEMO（需要注册，并生成文档预览）
在这里插入图片描述
2：拿到注册后的文件，并新建预览编辑服务（保证地址为外网访问）
3：直接前端访问所下载的demo（放入自己的项目中）

$.ajax({
            type: "",
            dataType:"json",
            cache:false,
            async:false,
            //所下载demo预览文件方法
            url:'/v1/api/file/getViewUrlWebPath',
            data:{
                fileUrl:'外网访问的文件地址/可以下载文件的方法（如有后缀，不可用中文）'
            },
            error: function() {
               layer.alert("错误！");
            },
            success:function (res) {
                console.log(res.data)
                var r = res.data;
                // 直接打开一个新的窗口展示
                window.open(r.wpsUrl, "窗口名称"
                // if (res.data) {
                //
                //     var demo = WebOfficeSDK.config({
                //         mode: 'normal',
                //         url: r.wpsUrl, // 如果需要通过js-sdk传递token方式鉴权，则需要包含w_tokentype=1参数
                //     })
                //     // 首次设置token和后续刷新token都是通过调用此API
                //     // demo.setToken({teken:r.token})
                //     // demo.setToken(r.token);
                //     demo.Application;
                // }else {
                //     layer.alert('请求错误！');
                // }
            }
        })