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 = '='; //这个地址是固定的写法（当然，这个 url 是需要付费 ）//在昨天，在百度之后，发现了wps 也有这么的一个功能，能线预览pdf,word,excel 等文件//let xurl = '/?src=';用法跟上面的一样，在这儿我就不多说了let url = xurl + encodeURIComponent(fileName);//如果文件名有中文，需要转译一下console.log(url);var opacityBottom = `<div class="opacityBottom" style = "display:none"><iframe class="bigImg" id="wordIframe" src="${url}" width="100%" height="500"></iframe></div>`;$(document.body).append(opacityBottom);toBigImg();}
//在线预览图片
function openImg(fileName) {var opacityBottom = '<div class="opacityBottom" style = "display:none"><img class="bigImg" src="' + fileName + '"></div>';$(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*/
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 = '='; //这个地址是固定的写法（当然，这个 url 是需要付费 ）//在昨天，在百度之后，发现了wps 也有这么的一个功能，能线预览pdf,word,excel 等文件//let xurl = '/?src=';用法跟上面的一样，在这儿我就不多说了let url = xurl + encodeURIComponent(fileName);//如果文件名有中文，需要转译一下console.log(url);var opacityBottom = `<div class="opacityBottom" style = "display:none"><iframe class="bigImg" id="wordIframe" src="${url}" width="100%" height="500"></iframe></div>`;$(document.body).append(opacityBottom);toBigImg();}
//在线预览图片
function openImg(fileName) {var opacityBottom = '<div class="opacityBottom" style = "display:none"><img class="bigImg" src="' + fileName + '"></div>';$(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*/