前端实现预览 docx xlsx pdf

最新推荐文章于 2024-08-08 07:56:32 发布

Muertos

最新推荐文章于 2024-08-08 07:56:32 发布

阅读量1.4k

点赞数 1

分类专栏： js 文档 html

本文链接：https://blog.csdn.net/csk246/article/details/108884678

版权

js 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

文档

1 篇文章 0 订阅

订阅专栏

所需插件
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,'&amp;') 
					.replace(/</g,'&#60;')
					.replace(/>/g,'&#62;') 
					.replace(/\n/g,'<br/>') 
					.replace(/\t/g,'&nbsp;&nbsp;&nbsp;&nbsp;')
					
				);
			});
		}); 
	}
	//加载 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);
	}
});