vue前端实现导出页面为word的两种方法代码
更新时间：2024年04月25日 11:29:33 作者：盐多碧咸。。
在前端开发中我们常常需要将页面页面为word文件,这篇文章主要给大家介绍了关于vue前端实现导出页面为word的两种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
将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; boundary="NEXT.ITEM-BOUNDARY";type="text/html"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset="utf-8"\nContent-Location: ' +
location.href +
"\n\n<!DOCTYPE html>\n" +
'<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">\n_html_</html>',
head:
'<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\n<style>\n_styles_\n</style>\n<!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:TrackMoves>false</w:TrackMoves><w:TrackFormatting/><w:ValidateAgainstSchemas/><w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid><w:IgnoreMixedContent>false</w:IgnoreMixedContent><w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText><w:DoNotPromoteQF/><w:LidThemeOther>EN-US</w:LidThemeOther><w:LidThemeAsian>ZH-CN</w:LidThemeAsian><w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript><w:Compatibility><w:BreakWrappedTables/><w:SnapToGridInCell/><w:WrapTextWithPunct/><w:UseAsianBreakRules/><w:DontGrowAutofit/><w:SplitPgBreakAndParaMark/><w:DontVertAlignCellWithSp/><w:DontBreakConstrainedForcedTables/><w:DontVertAlignInTxbx/><w:Word11KerningPairs/><w:CachedColBalance/><w:UseFELayout/></w:Compatibility><w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel><m:mathPr><m:mathFont m:val="Cambria Math"/><m:brkBin m:val="before"/><m:brkBinSub m:val="--"/><m:smallFrac m:val="off"/><m:dispDef/><m:lMargin m:val="0"/> <m:rMargin m:val="0"/><m:defJc m:val="centerGroup"/><m:wrapIndent m:val="1440"/><m:intLim m:val="subSup"/><m:naryLim m:val="undOvr"/></m:mathPr></w:WordDocument></xml><![endif]--></head>\n',
body: "<body>_body_</body>",
},
};
var options = {
maxWidth: 624,//最大宽度
};
// 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');
// var img = new Image(); 用这一行的话，WPS不显示图片，用上面的——只兼容office Word。
var mhtmlBottom = "\n";
for (var i = 0; i < img.length; i++) {
// Calculate dimensions of output image
var 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 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");
// 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 stylesheet
var styles = "";
// Aggregate parts of the file together
var 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 contents
var blob = new Blob([fileContent], {
type: "application/msword;charset=utf-8"
});
saveAs(blob, fileName + ".doc");
};
})(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)");
}
}总结
到此这篇关于vue前端实现导出页面为word的两种方法的文章就介绍到这了,更多相关vue前端导出页面为word内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue+element-ui:使用el-dialog时弹框不出现的解决
这篇文章主要介绍了vue+element-ui:使用el-dialog时弹框不出现的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue 输入电话号码自动按3-4-4分割功能的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
vue+elementUI实现当渲染文本超出一定字数时显示省略号
这篇文章主要介绍了vue+elementUI实现当渲染文本超出一定字数时显示省略号,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
今天小编就为大家分享一篇vue: WebStorm设置快速编译运行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
在Vue应用中，有时我们需要实现文件预览和打印的功能，比如，我们可能需要预览并打印PDF文件、图片文件等，本文将介绍如何在Vue中实现文件预览和打印的功能，并提供相应的代码示例2023-06-06
这篇文章给大家介绍了vue数据传递的方法，包括，父组件向子组件传值 ，子组件向父组件传值 ，路由传值等多种方法，需要的朋友参考下2018-04-04
这篇文章主要介绍了vue自定义table表如何实现内容上下循环滚动问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在Vue中通过Mustache语法（双大括号）将data中的文本数据插入到HTML中,下面这篇文章主要给大家介绍了关于Vue中Mustache插值语法与v-bind指令的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
右键菜单在项目开发中是属于比较高频的组件了,所以这篇文章小编主要来和大家介绍一下如何利用vue3开发一个右键菜单,有需要的可以参考下2024-03-03
这篇文章主要介绍了vue中$set与$delete的使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论