在线预览

2022-06-17

字数统计: 204字 | 阅读时长≈ 1分

实现在线预览Word,Excel,PowerPoint格式的文档

使用微软的预览接口来实现该功能

输入文档地址（可访问资源），点击创建URL按钮就可以生成一个新的链接：https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx

也就是说在使用的过程中可以通过‘https://view.officeapps.live.com/op/view.aspx?src=’ + url的方式打开

//a标签跳转新页面方式打开
<a target='_black'  href='https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx'>预览文件</a>

//当前页面iframe嵌入方式打开
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx' />

google的文档在线预览实现同微软（资源必须是公共可访问的）

注意事项

在创建好url之后，可能会出现无法打开文档的情况，这时候就需要对照官网的解释来查找问题了，官方文档的解释如下:
若您看到错误“很抱歉，由于某种原因我们无法打开该文件”，它意味着无法找到文档或无法显示文档。可能的原因包括：

在您提供的 URL 中无法找到任何文档。请确保您提供正确的 URL。

文档而言太大。Word 和 PowerPoint 文档必须小于 10 兆字节;Excel 必须小于五个兆字节。

文档的保存格式不是 Web 浏览器支持打开的格式。请尝试将您的文档保存为下列格式之一：

Word: docx dotx

Excel: xlsx、xlsb、xls、xlsm

PowerPoint: pptx、 ppsx、 ppt、 pps、 potx、 ppsm

您需要登录或提供密码才能打开该文档。将文档设为可公开查看。

文档的文件名称包含无效字符。请尝试编码的文件的名称，当您键入文档的 URL 或重命名文件以仅使用字母和数字。
例如，要编码的 URL，包括与号 (&)，您需要键入%26 & 字符。有关 URL 编码的详细信息，也称为为百分比编码，请参阅维基百科的百分比编码。

[官网地址]: https://support.office.com/zh-cn/article/%E8%81%94%E6%9C%BA%E6%9F%A5%E7%9C%8B-office-%E6%96%87%E6%A1%A3-1cc2ea26-0f7b-41f7-8e0e-6461a104544e?ui=zh-CN&rs=zh-CN&ad=CN

预览PDF文件

上述方法适用于Word，Excel，PowerPoint，但是不适用于PDF文件的预览

a标签实现


//一个a标签即可实现
<a target='_black'  href='http://mczaiyun.top/ht/4.pdf'>预览PDF文件</a>

jquery.media.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .read_html{
        position: absolute;
        width: 50%;
        height: 60%;
        background: skyblue;
        bottom: 0;
        right: 0;
    }
</style>
<body>
    <div class="panel-body">
        <a class="media" href="/resource/test.pdf">qqq</a>  
        <a class="media" href="https://www.jq22.com/demo/jquerypdf201808150005/pdf1.pdf">qqq</a>  
        <a href="/resource/test.pdf">我是一个</a>

    </div>
    <button id="test" >change</button>
    <div class="read_html">

    </div>
    <script src="/js/jquery-1.7.1.min.js"></script>
    <script src="/js/jquery.media.js"></script>

    <script>
        // $(function() {  
        //     $('a.media').media({width:800, height:600});  
        // });
        $('#test').on('click',function(){
            $('#pdf_iframe').attr('src',"/resource/test.pdf")
        })
        $(`<iframe id="pdf_iframe" src="https://www.jq22.com/demo/jquerypdf201808150005/pdf1.pdf" width="100%" height="100%" frameborder="1" >`).appendTo($('.read_html'))
    </script>
</body>
</html>

在线预览，在线编辑，文档转换，wps全帮你搞定，java + vue / react + wps.js实现你的在线编辑、预览与转换

VUE体验地址
https://ljserver.cn/wpsonline

react体验地址
https://ljserver.cn/wpsonline-react

后台java项目下载地址
gitee下载地址
	https://gitee.com/mose-x/wps-view-java.git
前台react项目下载地址
gitee下载地址
	https://gitee.com/mose-x/wps-view-react.git
前台vue项目下载地址
gitee下载地址
	https://gitee.com/mose-x/wps-view-vue.git

PageOffice，

一款改变传统办公方式的软件，给各种管理软件系统和网站应用添加在线Office能力，让用户远离上传下载的烦恼，开创局域网在线Office办公的新时代，无论是普通的在线编辑Word/Excel/PPT，还是复杂的编程控制、读写Word/Excel，都会让您得心应手，一切无忧。卓正软件三年时间倾力打造，PageOffice 5重磅发布，PageOffice完美支持所有浏览器核心的在线Office平台，完美支持高分屏，多屏显示，新增支持.NET CORE，安全加固运行稳定可靠，品质卓越，完胜市场同类产品。