所需插件
1.docx 根目录下面的 mammoth.browser.js
https://github.com/mwilliamson/mammoth.js
2.pdf 这里下载整个项目
https://github.com/mozilla/pdf.js
3.xlsx 目录 dist\xlsx.full.min.js
https://github.com/SheetJS/sheetjs
辅助插件
https://cdn.bootcdn.net/ajax/libs/require.js/0.10.0/require.js
https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js
编写预览页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="require.js" data-main="main.js" ></script>
<style>
*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
width: 100%;
}
#content{
width: 100%;
height: 100%;
}
iframe{
border: 0px;
}
table thead th,.td-left{
background-color: rgb(248, 248, 248);
color: #767474;
font-weight: 100;
text-align: center;
}
table{
width: 100%;
}
table tr{
height: 30px;
}
td{
min-width:50px;
}
table,tr,td{
border-collapse:collapse;
}
table,tr,td,th{
border: 1px solid #ddd;
}
.td-left{
}
</style>
</head>
<body>
<a href="?fileUrl=1.xlsx&fileType=xlsx">表格</a>
<a href="?fileUrl=1.doc&fileType=doc">文档1</a>
<a href="?fileUrl=1.docx&fileType=doc">文档</a>
<a href="?fileUrl=1.pdf&fileType=pdf">pdf</a>
<a href="?fileUrl=1.txt&fileType=txt&charset=utf-8">txt</a>
<div id="content" >
</div>
</body>
</html>
main.js
define(function(){
//解析地址栏参数开始
var object={};
var url=window.location.href;
if(url.indexOf("?")!=-1){
url=url.substr(url.indexOf("?")+1,url.length);
}
var strs = url.split("&");
for(var i = 0; i < strs.length; i ++){
object[strs[i].split("=")[0]]=decodeURIComponent(strs[i].split("=")[1]);
}
//解析地址栏参数结束
var fileUrl=object.fileUrl;
var fileType=object.fileType;
var charSet=object.charset;
//读取文件流
var loadByte=function($,url,fn){
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
buffer = xhr.response;
fn(buffer);
};
xhr.send();
}
//加载pdf 这里直接调用pdf预览的功能
var loadPdf=function(url){
require(['jquery'],function($){
var u=$("<a ></a>").attr("href",url);
var href=u[0].href;
$("#content").html(
"<iframe src = './pdf/web/viewer.html?file="+href+"' width='100%' height='100%' allowfullscreen webkitallowfullscreen></iframe>"
);
});
}
//加载xlsx
var loadXls=function(url){
//加载 jquery插件 xlsx
// xlsx xlsx.full.min.js 插件 这里我把文件名给改了一下
require(['jquery','xlsx'],function($,xlsx){
loadByte($,url,function(e){
var excelData = xlsx.read(e, {
type: 'array'
});
var table = xlsx.utils.sheet_to_html(excelData.Sheets[excelData.SheetNames[0]]);
var t=$(table)[2]
var ref=excelData.Sheets[excelData.SheetNames[0]]['!ref'];
var html="<thead><tr><th style='width:30px;min-width: 30px;'></th>";
if(ref&&ref.indexOf(":")){
var begin=ref.split(":")[0];
var end=ref.split(":")[1];
var y=get26Zm(/[A-Z]+/.exec(begin)[0]);
var y1=get26Zm(/[A-Z]+/.exec(end)[0]);
for(var i=y;i<=y1;i++){
html+="<th>"+get26Numbe(i)+"</th>\n"
}
}
html+="</tr></thad>";
$("#content").html(table).find("table tbody").before(html).find("tr").each(function(index){
$(this).find("td:eq(0)").before("<td style='min-width:30px;' class='td-left'>"+(index+1)+"</td>");
});
});
})
}
// 处理 表格 头部的 ABCDEF
var get26Numbe=function(number){
number--;
var str=(number).toString(26).toLocaleUpperCase()+"";
var result="";
for(var i=0;i<str.length;i++){
if((str.length>1&&i==0) ){
count=64;
}else{
count=65;
}
result+=String.fromCharCode( parseInt(str.charAt(i),26)+count);
}
return result;
}
var get26Zm=function(str){
var result="";
for(var i=0;i<str.length;i++){
var n=str.charAt(i).charCodeAt()-64;
result+=n.toString(26);
}
return parseInt(result,26);
}
//处理 txt格式预览
var loadText=function(url){
//加载jquery插件
require(['jquery'],function($){
loadByte($,url,function(byte1){
var x = new Uint8Array(byte1);
var str =new TextDecoder(charSet?charSet:"utf-8").decode(x);
$("#content").html(
str
.replace(/&/g,'&')
.replace(/</g,'<')
.replace(/>/g,'>')
.replace(/\n/g,'<br/>')
.replace(/\t/g,' ')
);
});
});
}
//加载 docx文档
var loadDoc=function(url){
//加载 jquery 和
// docx 插件 mammoth.browser.js 我改成了 mammoth.js
require(['jquery','mammoth'],function($,mammoth){
loadByte($,url,function(e){
mammoth.convertToHtml({arrayBuffer:e}).then(function(result){
var html =result.value;
$("#content").html(html);
}).done() ;
});
});
}
// 加载图片格式
var loadImage=function(url){
document.getElementById("content").innerHTML="<img src='"+url+"' />"
}
if(fileType=='docx'||fileType=='doc'){
loadDoc(fileUrl);
}else if(fileType=='xls'||fileType=='xlsx'){
loadXls(fileUrl);
}else if(fileType=='pdf'){
loadPdf(fileUrl);
}else if(fileType=='jpg'){
loadImage(fileUrl);
}else if(fileType=='txt'){
loadText(fileUrl);
}
});
最后运行效果
最后的目录结构
- jquery.js
- main.html
- main.js
- mammoth.js
- require.js
- xlsx.js
- pdf * 这边我是导入整个文件夹的