网站要多钱wordpress的分类目录和标签

当前位置： 首页 > news >正文

网站要多钱,wordpress的分类目录和标签,广告营销,wordpress撰写将vue页面导出为word文档#xff0c;不用写模板#xff0c;直接导出即可。 第一种方法(简单版) 第一步#xff1a;安装所需依赖 npm install html-docx-js -S npm install file-saver -S第二步#xff1a;创建容器#xff0c;页面使用方法#xff08;简单版#xff1…将vue页面导出为word文档不用写模板直接导出即可。 第一种方法(简单版) 第一步安装所需依赖 npm install html-docx-js -S npm install file-saver -S第二步创建容器页面使用方法简单版导出内容为纯文字没有表格、图片这些东西 第二步创建容器页面使用方法复杂版导出内容带有表格和图片的情况 【使用了tinymce富文本编辑器会有表格和图片然后需要导出带有表格和图片的word文档】 注意使用v-html更新元素的 innerHTMLhtml结构会被解析为标签 以下是需要导出的内容exportContent div idmanagerReportclasscheckInfoStylediv v-htmlexportContent/div/div把exportContent 内容导出为word文档 下边直接写导出方法了 // 第一种方法wordDownload1 () {this.\(nextTick(() {const htmlContent document.getElementById(managerReport) // managerReport id要对应// 注意直接导出表格没有边框并且不是100%撑满的所以需要做以下的处理// 查找并修改表格的样式const tables htmlContent.querySelectorAll(table);tables.forEach(table {table.style.borderCollapse collapsetable.style.width 100%table.querySelectorAll(td, th).forEach((cell, index) {if (cell){cell.style.border 1px solid blackcell.style.padding 8px}})})// 拿到需要导出的内容let htmlString htmlContent.innerHTML// 注意以下操作是为了解决导出内容为两端对齐的情况如果导出内容某一行中有几个字那这几个字就会两端对齐格式就错乱了// 考虑到是因为br标签才会两端对齐所以做如下的操作去除br标签[br标签是换行标签]把内容加到div标签内const regex /([^]*?)br.*?/gi; // 找到结束标签 ‘ br / ’ 和开始标签 ‘ ’ 中间的内容把这部分内容放到div标签内htmlString htmlString.replace(regex, (match, p1) { // p1就是找到的br标签中间的内容let ret if (p1.trim()){ret div\){p1}/div // 把找到的内容放到div标签内} else {ret divnbsp;/div // 不加此步骤如果导出内容中间有空行就会解析不了直接吞掉空行了}return ret})// 将HTML转换为Blob对象const blob htmlDocx.asBlob(htmlString);saveAs(blob, \({this.editData.cTopicC}(\){this.editData.dDate}).docx)})},// 第二种方法wordDownload2 () {this.\(nextTick(() {const htmlContent document.getElementById(managerReport)// 查找并修改表格的样式const tables htmlContent.querySelectorAll(table)tables.forEach(table {table.style.borderCollapse collapsetable.style.width 100%table.querySelectorAll(td, th).forEach((cell, index) {if (cell){cell.style.border 1px solid blackcell.style.padding 8px}})})//去除br标签内容加到div标签内const brs htmlContent.querySelectorAll(br)brs.forEach(br {const parent br.parentNode //获取父节点let textNode br.previousSibling //前一个兄弟节点// while (textNode textNode.nodeType ! Node.TEXT_NODE) {// textNode textNode.previousSibling; //循环查找直到找到一个文本节点或没有更多的兄弟节点// }if (textNode textNode.nodeType Node.TEXT_NODE textNode.textContent.trim()){ //找到文本节点并且内容不为空const div document.createElement(div)div.textContent textNode.textContentparent.insertBefore(div, br)parent.removeChild(textNode) //移除原有的文本节点避免内容重复} else {const div document.createElement(div)div.innerHTML nbsp;parent.insertBefore(div, br)}parent.removeChild(br)})const htmlContentCopy htmlContent.cloneNode(true)const imgs htmlContentCopy.querySelectorAll(img)imgs.forEach(img {let docxWidth 620if (img.width docxWidth){img.height img.height * docxWidth / img.widthimg.width docxWidth}})// 将HTML转换为Blob对象const blob htmlDocx.asBlob(htmlContentCopy.innerHTML)saveAs(blob, \){this.editData.cTopicC}(\({this.editData.dDate}).docx)})},注意在当前页面引入依赖 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 Content-Base: location.href Content-Type: Multipart/related; boundaryNEXT.ITEM-BOUNDARY;typetext/html--NEXT.ITEM-BOUNDARY Content-Type: text/html; charsetutf-8 Content-Location: location.href !DOCTYPE htmlhtml 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 _html_/html,head:head meta http-equivContent-Type contenttext/html; charsetutf-8 style _styles_ /style !--[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 ,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 ;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 ;mhtmlBottom Content-Location: uri
;mhtmlBottom Content-Type: uri.substring(uri.indexOf(:) 1, uri.indexOf(;))
;mhtmlBottom Content-Transfer-Encoding: uri.substring(uri.indexOf(;) 1, uri.indexOf(,)) ;mhtmlBottom uri.substring(uri.indexOf(,) 1) ;}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));} }