jquery 直接网页导出 word Excel
fileType: “.doc”,//文档类型 经测试 可以doc xls html 其他的自己去试
<html
<head>
<title>wordExPort</title>
<meta charset="utf-8" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="FileSaver.js"></script>
<script src="jquery.wordexport.js"></script>
<style></style>
</head>
<body>
<h3 style="text-align: center;margin:50px;" id="butn"><a class="word-export" href="javascript:void(0)"> 导出xls </a></h3>
<div id="page-content">
<div id="table">
<div class="tit">网线、电话维修申请单</div>
<table border="1" class="w100">
<tr style="height: 60px;">
<td class="w25">申请日期</td>
<td class="w25"></td>
<td class="w25">申请人</td>
<td class="w25"></td>
</tr>
<tr>
<td class="w25" rowspan="2">申请类型</td>
<td class="w25" colspan="3" style="height: 40px;">网线：安装 维修</td>
</tr>
<tr style="height: 40px;">
<td class="w25" colspan="3">网线：安装 维修</td>
</tr>
<tr style="height: 60px;">
<td class="w25">申请事项及原因</td>
<td class="w25" colspan="3"></td>
</tr>
<tr style="height: 60px;">
<td class="w25">申请科室负责人意见</td>
<td class="w25" colspan="3"></td>
</tr>
<tr style="height: 60px;">
<td class="w25">申请科室分管院长</td>
<td class="w25" colspan="3"></td>
</tr>
<tr style="height: 60px;">
<td class="w25">申请科室分管院长意见</td>
<td class="w25" colspan="3"></td>
</tr>
<tr style="height: 60px;">
<td class="w25">院长意见</td>
<td class="w25" colspan="3"></td>
</tr>
<tr style="height: 60px;">
<td class="w25">院长办理情况</td>
<td class="w25" colspan="3"></td>
</tr>
</table>
</div>
</div>
</body>
<style type="text/css" id="wordExPortCss">
table {
border-collapse: collapse;
}
td {
border: 1px solid #000;
font-family: 宋体;
font-weight: bold;
}
#table {
width: 200mm;
height: 280mm;
}
.tit {
text-align: center;
font-size: 16px;
font-weight: bold;
}
.w25 {
width: 25%;
}
.w75 {
width: 75%;
}
.w100 {
width: 100%;
}
.h50 {
height: 50%;
}
table {
border-spacing: 0;
text-align: center;
}
</style>
<style type="text/css" id="updateExportCss">
@page WordSection {
size: 210mm 297mm;
/*宽高*/
margin: 30px;
/*边距*/
}
</style>
</html>
js:一
<script type="text/javascript">
$(document).ready(function ($) {
$("#butn").click(function (event) {
var data = {
fileName: "测试文档",//文档名
fileType: ".doc",//文档类型 经测试 可以doc xls html 其他的自己去试
isHeader: false,//是否显示页眉 *xls 不要设置页眉页脚 改为false
isFooter: false,//是否显示页脚 *xls 不要设置页眉页脚 改为false
header: "测试页眉",//页眉标题
styles: $("#wordExPortCss"),//要导出的内容style
updateExportCss: $("#updateExportCss")//需要修改导出的word样式 宽度高度 margin之类的
}
$("#page-content").wordExport(data);
});
});
</script>
js:二
<script type="text/javascript">
jQuery(document).ready(function($)
$("#butn").click(function(event) {
var data = {
fileName: "网线、电话安装、维修申请单",//文档名
fileType: ".doc",//文档类型 经测试 可以doc xls html 其他的自己去试
isHeader: false,//是否显示页眉 *xls 不要设置页眉页脚 改为false
isFooter: false,//是否显示页脚 *xls 不要设置页眉页脚 改为false
styles: $("#sty"),//要导出的内容style
updateExportCss: $("#updateExportCss")//需要修改导出的word样式 宽度高度 margin之类的
}
$("#page-content").wordExport(data);
});
});
</script>
jquery.wordexport.js
if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
(function ($) {
$.fn.wordExport = function (exPortData) {
_initData(exPortData);
var options = {
maxWidth: 1000
};
// Clone selected element before manipulating it
var markup = $(this).clone();
// Remove hidden elements from the output
markup.each(function () {
var self = $(this);
if (self.is(':hidden'))
self.remove();
});
// Embed all images using Data URLs
var images = Array();
var img = markup.find('img');
for (var i = 0; i < img.length; i++) {
// Calculate dimensions of output image
var w = Math.min(img[i].width, options.maxWidth);
var h = img[i].height * (w / img[i].width);
// Create canvas for converting image to data URL
var canvas = document.createElement("CANVAS");
canvas.width = w;
canvas.height = h;
// Draw image to canvas
var context = canvas.getContext('2d');
context.drawImage(img[i], 0, 0, w, h);
// Get data URL encoding of image
var uri = canvas.toDataURL("image/png");
$(img[i]).attr("src", img[i].src);
img[i].width = w;
img[i].height = h;
// Save encoded image to array
images[i] = {
type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),
encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")),
location: $(img[i]).attr("src"),
data: uri.substring(uri.indexOf(",") + 1)
};
}
// Prepare bottom of mhtml file with image data
var mhtmlBottom = "\n";
for (var i = 0; i < images.length; i++) {
mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
mhtmlBottom += "Content-Location: " + images[i].location + "\n";
mhtmlBottom += "Content-Type: " + images[i].type + "\n";
mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n";
mhtmlBottom += images[i].data + "\n\n";
}
mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";
var fileContent = getModelHtml(markup.html(), mhtmlBottom,exPortData);
var blob = new Blob([fileContent], {
type: "application/msword;charset=utf-8"
});
saveAs(blob, exPortData.fileName + exPortData.fileType);
};
function _initData(exPortData) {
exPortData.fileName = typeof(exPortData.fileName) !== 'undefined' ? exPortData.fileName : "jQuery-Word-Export";
exPortData.fileType=typeof (exPortData.fileType)!=="undefined"?exPortData.fileType:".doc";
}
function getModelHtml(mhtml, mhtmlBottom, exPortData) {
var styles,updateStyles,header,footer="";
if(exPortData.styles){
styles=exPortData.styles.html();
}
if(exPortData.updateExportCss){
updateStyles=exPortData.updateExportCss.html();
}
if(exPortData.isHeader){
header="<div style=\"mso-element:header;padding-bottom:20px;\" id=\"h1\">\n" +
"<p class=\"MsoHeader\">"+exPortData.header+"</p>\n" +
"</div>";
}
if(exPortData.isFooter){
footer="<div style=\"mso-element:footer;text-align: center;\" id=\"f1\">\n" +
"<span style=\"mso-field-code: PAGE \"></span>/<span style=\"mso-field-code:NUMPAGES\"></span>\n" +
"</div>";
}
return `
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table#hrdftrtbl {
margin: 0in 0in 0in 900in;
width: 1px;
height: 1px;
overflow: hidden;
}
p.MsoHeader {
font-size: 20px;
font-weight: bold;
text-align: center;
}
p.MsoFooter, li.MsoFooter, div.MsoFooter {
margin: 0in;
mso-pagination: widow-orphan;
tab-stops: center 3.0in right 6.0in;
font-size: 20pt;
font-weight: bold
}
<!-- /*FontDefinitions*/
@page WordSection {
size: 1260px 768px;
margin: 30px;
mso-header-margin: 20px;
mso-footer-margin: 20px;
mso-header: h1;
mso-footer: f1;
}
div.WordSection {
page: WordSection;
}
-->
${styles}
${updateStyles}
</style>
</head>
<body lang=ZH-CN style="tab-interval:21.0pt">
<div class="WordSection">
${mhtml}
<table id="hrdftrtbl" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
${header}
</td>
<td>
${footer}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
${mhtmlBottom}
`}})(jQuery);
} else {
if (typeof jQuery === "undefined") {
console.error("jQuery Word Export: missing dependency (jQuery)");
}
if (typeof saveAs === "undefined") {
console.error("jQuery Word Export: missing dependency (FileSaver.js)");
}
}
FileSaver.js
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs=saveAs||function(e){"use strict";if(typeof e==="undefined"||typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var t=e.document,n=function(){return e.URL||e.webkitURL||e},r=t.createElementNS("http://www.w3.org/1999/xhtml","a"),o="download"in r,a=function(e){var t=new MouseEvent("click");e.dispatchEvent(t)},i=/constructor/i.test(e.HTMLElement)||e.safari,f=/CriOS\/[\d]+/.test(navigator.userAgent),u=function(t){(e.setImmediate||e.setTimeout)(function(){throw t},0)},s="application/octet-stream",d=1e3*40,c=function(e){var t=function(){if(typeof e==="string"){n().revokeObjectURL(e)}else{e.remove()}};setTimeout(t,d)},l=function(e,t,n){t=[].concat(t);var r=t.length;while(r--){var o=e["on"+t[r]];if(typeof o==="function"){try{o.call(e,n||e)}catch(a){u(a)}}}},p=function(e){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)){return new Blob([String.fromCharCode(65279),e],{type:e.type})}return e},v=function(t,u,d){if(!d){t=p(t)}var v=this,w=t.type,m=w===s,y,h=function(){l(v,"writestart progress write writeend".split(" "))},S=function(){if((f||m&&i)&&e.FileReader){var r=new FileReader;r.onloadend=function(){var t=f?r.result:r.result.replace(/^data:[^;]*;/,"data:attachment/file;");var n=e.open(t,"_blank");if(!n)e.location.href=t;t=undefined;v.readyState=v.DONE;h()};r.readAsDataURL(t);v.readyState=v.INIT;return}if(!y){y=n().createObjectURL(t)}if(m){e.location.href=y}else{var o=e.open(y,"_blank");if(!o){e.location.href=y}}v.readyState=v.DONE;h();c(y)};v.readyState=v.INIT;if(o){y=n().createObjectURL(t);setTimeout(function(){r.href=y;r.download=u;a(r);h();c(y);v.readyState=v.DONE});return}S()},w=v.prototype,m=function(e,t,n){return new v(e,t||e.name||"download",n)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(e,t,n){t=t||e.name||"download";if(!n){e=p(e)}return navigator.msSaveOrOpenBlob(e,t)}}w.abort=function(){};w.readyState=w.INIT=0;w.WRITING=1;w.DONE=2;w.error=w.onwritestart=w.onprogress=w.onwrite=w.onabort=w.onerror=w.onwriteend=null;return m}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!==null){define("FileSaver.js",function(){return saveAs})}
4532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
