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 = `<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等文件相关推荐

html js 在线预览 pdf word xls等
1.前端实现pdf文件在线预览功能方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <a ...
js在线预览pdf文件
js在线预览PDF文件一.效果预览二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...
pdf.js在线预览PDF文件实现
pdf.js是一款功能比较强大的在线预览PDF插件,自带"打印","搜索","翻页"等功能,强大且实现方便,并且兼容性比较好(兼容ie10及 ...
浏览器在线预览pdf、txt、office文件
//使用文件预览的原因是:TMD微信浏览器屏蔽掉文件下载链接,只好折中使用文件在线预览功能//要点:1.office文件用微软的插件打开http://view.officeapps.live.com/ ...
前端（vue）js在线预览PDF、Word、Excel、ppt等office文件
js解決 window.open("https://view.xdocin.com/view?src=" + encodeURIComponent(url) + '&too ...
vue版pdf.js 在线预览pdf文件流
1.简介由于我使用的是若依版的vue前端框架(ElementUI二开),因此不知道为什么在前端配置pdf.js一直无法生效,所以换了一个思路,将pdf.js相关文件放置在后台代码中,以访问后台页面的 ...
spring boot2.X word在线预览 pdf.js
最近公司项目需求需要在线预览word文档,并且不能在在线下载和编辑.在此记录我是如何做的. 针对word的在线预览网上大多给的解决方案就是先把word文件转成pdf,然后通过pdf.js在线预览pdf ...
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
加载js文件，在线预览pdf文档
加载js文件,在线预览pdf文档效果演示环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码效果演示首先,先展示效果图环境要求 Tomcat8.5 [注意]:T ...

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

js在线预览pdf,doc,xls,jpg等文件相关推荐

最新文章

热门文章