js在线预览pdf,doc,xls,jpg等文件

由于项目需要，需要在上传文件后在线预览所上传的文件。最开始我的思路就是想到各种插件什么的。比如说pdf.js、pdfobject，但最后都没能达到我所想要的效果。
最后我发现，原来，只需要一个很简单的一个，就能实现。不多说……
注：以下方法是纯jq的写法，如果需要vue，可以参考该方法进行改造

//通用的方法
function toBigImg() {
    $(".opacityBottom").addClass("opacityBottom");//添加遮罩层
    $(".opacityBottom").show();
    $("html,body").addClass("none-scroll");//下层不可滑动
    $(".bigImg").addClass("bigImg");//添加图片样式
    $(".opacityBottom").click(function () {//点击关闭
    	$("html,body").removeClass("none-scroll");
    	$(".opacityBottom").remove();
    });
}

//在线预览pdf,doc,docx,xls,xlsx
function openWord(fileName) { //fileName为文件上传到服务器后的文件路径
    let xurl = 'http://view.xdocin.com/xdoc?src='; //这个地址是固定的写法（当然，这个 url 是需要付费 ）
    //在昨天，在百度之后，发现了wps 也有这么的一个功能，能线预览pdf,word,excel 等文件
    //let xurl = 'https://wps-view.zhihuipk.com/?src=';用法跟上面的一样，在这儿我就不多说了
    let url = xurl + encodeURIComponent(fileName);//如果文件名有中文，需要转译一下
    console.log(url);
    var opacityBottom = `
`;
    $(document.body).append(opacityBottom);
    toBigImg();
   
}

//在线预览图片
function openImg(fileName) {
    var opacityBottom = '
+ fileName + '">
';
    $(document.body).append(opacityBottom);
    toBigImg();
}

/*点击上传的文件（图片全屏放大）start*/
.bigImg {
    position: absolute;
    top: 50%;
    left: 50%;
    /*图片向左移动自身宽度的50%, 向上移动自身高度的50%。*/
    transform: translate(-50%,-50%);
}
/*遮罩层*/
.opacityBottom {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    top: 0;
    left: 0;
}
/*点击上传的文件（图片全屏放大）end*/