XDOC文档预览服务-使用笔记

Shrek农忙中···

已于 2024-09-24 16:25:24 修改

阅读量450

点赞数 3

文章标签：笔记

于 2024-09-24 16:19:35 首次发布

本文链接：https://blog.csdn.net/pzh2471266402/article/details/142492196

版权

总结就是一个字：方便~

不用下载任何插件或是包，利用该服务获取一个src地址，往iframe标签一扔即可；

支持PDF.OFD,DOCIX.XLS/X.PPTIXWPS,JPG,MP4等多种文档格式，而且自动识别！扔进标签就完了。

原文档地址：XDOC文档预览服务

话不多说，直接上代码，小编项目是vue3+vite（什么项目不要紧，会写js就能用）

1、准备一个空的容器，用来装iframe标签，要设置一个id

<div id="resourcearea"></div>

2、准备一个配置对象；作用是预览时加水印、是否允许下载源文档等

let ops = {

    // "pdf": true, //word文档尝试以pdf方式显示，默认false

    // "img": true, //尝试以图片方式显示，默认false

    // "watermark": "XDOC文档预览", //水印文本，显示水印

    "saveable": true, //是否允许保存源文件，默认false

    // "printable": false, //是否允许打印，默认true

    // "copyable": false, //是否允许选择复制内容，默认true

    // "toolbar": false, //是否显示工具条，默认true

    // "title": "文档预览", //自定义标题

    // "expire": 30, //预览链接有效期，单位分钟，默认永久有效

    // "limit": "1,3", //限制页数，如：“5”表示只显示前5页，“2,5”表示从第2页开始的5页，对pdf/doc/docx/ppt/pptx有效

    // "mtime": 1633093801, //文件修改时间戳（精确到秒）或修改时间（如：2021-10-01 21:10:01），值改变刷新缓存，实时预览

    // "referer": "", //读取http源文件时传入的referer值

    // "header": "", //读取http源文件时传入的header值，格式为JSON字符串

    // "ip": "", //限制ip预览，多个用","分割，支持*，如：192.168.*

    // "password": "", //口令，用户需要输入正确的口令，才能预览

};

3、自编一个预览方法，用于获取预览地址；动态创建iframe元素，添加到容器盒子进行展示

// src：源文件的访问路径
// ops：配置对象
// target：容器盒子的id，或容器元素
function preview(src, ops, target) {

    var xurl = "https://view.xdocin.com/view?src=";

    xurl += encodeURIComponent(src);

    if (ops) {

        for (var a in ops) {
            xurl += "&" + a + "=" + encodeURIComponent(ops[a]);
        }

    }

    if (target) {

        var parent = null;

        if (typeof target == "string") {

            parent = document.querySelector(target);

        } else if (target instanceof Element) {

            parent = target;

        }

        if (parent) {

            parent.innerHTML = "";

            var ele = document.createElement("iframe");
            // 为这个新元素添加ID
            ele.id = 'iframeEle';

            var att = document.createAttribute("frameborder");

            att.value = "0";

            ele.setAttributeNode(att);

            att = document.createAttribute("style");

            att.value = "width:100%;height:100%;";

            ele.setAttributeNode(att);

            parent.appendChild(ele);

            att = document.createAttribute("src");

            att.value = xurl;

            ele.setAttributeNode(att);

            return;

        }

    }

    // 没有容器就打开新窗口预览
    window.open(xurl);

}

4、调用预览方法（小编在vue组件挂载的时候调用）

onMounted(async () => {

    let resource1 = 'https://view.xdocin.com/demo/view.ppt'  // ppt文件
    let resource2 = 'https://view.xdocin.com/demo/view.docx' // word文件

    preview(resource1, ops, "#resourcearea");
})


// 测试的切换方法，切换展示ppt与word文档，可绑定一个按钮事件测试
let curindex = 0
function changenext() {

    let arr = ['https://view.xdocin.com/demo/view.ppt', 'https://view.xdocin.com/demo/view.docx']
    let len = arr.length
    curindex++
    curindex = curindex > len - 1 ? 0 : curindex
    preview(arr[curindex], ops, "#resourcearea");
}

5、搞掂收工~