html在线预览word，pdf，excel，txt，图片等文件。

最新推荐文章于 2024-06-28 11:47:50 发布

GideonYeung

最新推荐文章于 2024-06-28 11:47:50 发布

阅读量1.7k

点赞数 3

分类专栏：在线预览文章标签： java html jquery

本文链接：https://blog.csdn.net/weixin_40140969/article/details/114364640

版权

在线预览专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近做一个需要就是在线预览各种文件，找到的都是收费要么就是连接外网查看的，最后就自己在码云闲逛时发现了一个开源的项目。
具体流程就是下载码云的这个项目：https://gitee.com/kekingcn/file-online-preview
然后打成jar包启动或者在你本地导入idea启动先做测试（代码下载之后下载好依赖就可以启动，端口是8012重复了就换一下）。
如果你们没有测试项目可以去码云下载我的测试项目：https://gitee.com/Min-Duck/preview下载后直接启动（项目端口是8081）访问地址：http://localhost:8081/preview

在这里插入图片描述
4. 前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片预览</title>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/common.js"></script>
</head>
<body>
<iframe id="preview" style="width: 100vw;height: 100vh;" src=""></iframe>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        //在线预览项目的地址
        let preview_url = "http://127.0.0.1:8012/onlinePreview?url=";
        //你需要预览的的文件地址
        let src_url = "https://www.baidu.com/img/flexible/logo/pc/result.png";
        $("#preview").attr("src", preview_url + encodeURIComponent(base64encode(src_url)));
    });
</script>

common.js

function base64encode (input) {
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var i      = 0;
    input      = utf8Encode(input);
    while ( i < input.length ) {
        chr1 = input.charCodeAt(i++);
        chr2 = input.charCodeAt(i++);
        chr3 = input.charCodeAt(i++);
        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;
        if ( isNaN(chr2) ) {
            enc3 = enc4 = 64;
        } else if ( isNaN(chr3) ) {
            enc4 = 64;
        }
        output = output +
            keyStr.charAt(enc1) + keyStr.charAt(enc2) +
            keyStr.charAt(enc3) + keyStr.charAt(enc4);
    }
    return output;
}

function utf8Encode (text) {
    if (typeof text === 'string') {
        text = text.replace(/\x0d\x0a/g, "\x0a");
        var utftext = "";
        for ( var n = 0; n < text.length; n++ ) {
            var c = text.charCodeAt(n);
            if ( c < 128 ) {
                utftext += String.fromCharCode(c);
            }
            else if ( (c > 127) && (c < 2048) ) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    }
    return text;
}