求推荐建设网站,网站添加ico,佛山百度关键词推广,网站模板使用将vue页面导出为word文档#xff0c;不用写模板#xff0c;直接导出即可。
第一种方法(简单版)
第一步#xff1a;安装所需依赖
npm install html-docx-js -S
npm install file-saver -S第二步#xff1a;创建容器#xff0c;页面使用方法 注意#xff1a;在当前页面引…将vue页面导出为word文档不用写模板直接导出即可。
第一种方法(简单版)
第一步安装所需依赖
npm install html-docx-js -S
npm install file-saver -S第二步创建容器页面使用方法 注意在当前页面引入依赖
import FileSaver from file-saver;
import htmlDocx from html-docx-js/dist/html-docx;**第二种方法需要使用jquery
第一步安装所需依赖
npm install jquery --save
npm install file-saver第二步创建两个js文件一个是jquery文件(jq.js)一个是插件js的文件(jquery.wordexport.js)我把这两个js文件都放到utils文件夹下注意使用的时候一定要注意引用路径。这两个js文件代码我都放到文章最后有一个插件没有依赖包所以需要自己创建一个js文件jquery.wordexport.js
第三步在需要导出的页面引入文件
import $ from /utils/jq; // 文件引入路径一定要正确这是第二步创建的js文件jq.js
import saveAs from file-saver/dist/FileSaver;
import /utils/jquery.wordexport; // 文件引入路径一定要正确这是第二步创建的js文件(jquery.wordexport.js)第三步页面使用方法 注意如果导出的时候出现bug大多是因为文件路径引入有问题再次排查路径引入
jq.js
import $ from jquery;window.$ $;window.jQuery $;
export default $;jquery.wordexport.js
if (typeof jQuery ! undefined typeof saveAs ! undefined) {(function ($) {$.fn.wordExport function (fileName) {fileName typeof fileName ! undefined ? fileName : jQuery-Word-Export;var static {mhtml: {top:Mime-Version: 1.0\nContent-Base: location.href \nContent-Type: Multipart/related; boundaryNEXT.ITEM-BOUNDARY;typetext/html\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charsetutf-8\nContent-Location: location.href \n\n!DOCTYPE html\n html xmlns:vurn:schemas-microsoft-com:vml xmlns:ourn:schemas-microsoft-com:office:office xmlns:wurn:schemas-microsoft-com:office:word xmlns:mhttp://schemas.microsoft.com/office/2004/12/omml xmlnshttp://www.w3.org/TR/REC-html40\n_html_/html,head:head\nmeta http-equivContent-Type contenttext/html; charsetutf-8\nstyle\n_styles_\n/style\n!--[if gte mso 9]xmlw:WordDocumentw:ViewPrint/w:Vieww:TrackMovesfalse/w:TrackMovesw:TrackFormatting/w:ValidateAgainstSchemas/w:SaveIfXMLInvalidfalse/w:SaveIfXMLInvalidw:IgnoreMixedContentfalse/w:IgnoreMixedContentw:AlwaysShowPlaceholderTextfalse/w:AlwaysShowPlaceholderTextw:DoNotPromoteQF/w:LidThemeOtherEN-US/w:LidThemeOtherw:LidThemeAsianZH-CN/w:LidThemeAsianw:LidThemeComplexScriptX-NONE/w:LidThemeComplexScriptw:Compatibilityw:BreakWrappedTables/w:SnapToGridInCell/w:WrapTextWithPunct/w:UseAsianBreakRules/w:DontGrowAutofit/w:SplitPgBreakAndParaMark/w:DontVertAlignCellWithSp/w:DontBreakConstrainedForcedTables/w:DontVertAlignInTxbx/w:Word11KerningPairs/w:CachedColBalance/w:UseFELayout//w:Compatibilityw:BrowserLevelMicrosoftInternetExplorer4/w:BrowserLevelm:mathPrm:mathFont m:valCambria Math/m:brkBin m:valbefore/m:brkBinSub m:val--/m:smallFrac m:valoff/m:dispDef/m:lMargin m:val0/ m:rMargin m:val0/m:defJc m:valcenterGroup/m:wrapIndent m:val1440/m:intLim m:valsubSup/m:naryLim m:valundOvr//m:mathPr/w:WordDocument/xml![endif]--/head\n,body: body_body_/body,},};var options {maxWidth: 624,//最大宽度};// Clone selected element before manipulating itvar markup $(this).clone();// Remove hidden elements from the outputmarkup.each(function () {var self $(this);if (self.is(:hidden))self.remove();});// Embed all images using Data URLsvar images Array();var img markup.find(img);// var img new Image(); 用这一行的话WPS不显示图片用上面的——只兼容office Word。var mhtmlBottom \n;for (var i 0; i img.length; i) {// Calculate dimensions of output imagevar w Math.min(img[i].width 0 ? options.maxWidth : img[i].width, options.maxWidth);var h (img[i].height 0 ? options.defaultLength : img[i].height) * (w / (img[i].width 0 ? options.maxWidth : img[i].width));// Create canvas for converting image to data URLvar canvas document.createElement(CANVAS);canvas.width w;canvas.height h;// Draw image to canvasvar context canvas.getContext(2d);context.drawImage(img[i], 0, 0, w, h);// Get data URL encoding of imagevar uri canvas.toDataURL(image/png);// console.log(i:uri);$(img[i]).attr(src, img[i].src);img[i].width w;img[i].height h;mhtmlBottom --NEXT.ITEM-BOUNDARY\n;mhtmlBottom Content-Location: uri \n;mhtmlBottom Content-Type: uri.substring(uri.indexOf(:) 1, uri.indexOf(;)) \n;mhtmlBottom Content-Transfer-Encoding: uri.substring(uri.indexOf(;) 1, uri.indexOf(,)) \n\n;mhtmlBottom uri.substring(uri.indexOf(,) 1) \n\n;}mhtmlBottom --NEXT.ITEM-BOUNDARY--;//TODO: load css from included stylesheetvar styles ;// Aggregate parts of the file togethervar fileContent static.mhtml.top.replace(_html_, static.mhtml.head.replace(_styles_, styles) static.mhtml.body.replace(_body_, markup.html())) mhtmlBottom;// Create a Blob with the file contentsvar blob new Blob([fileContent], {type: application/msword;charsetutf-8});saveAs(blob, fileName .doc); // 注意不要改成docx不然会打不开};})(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));}
}
