js 导出word文档

通过基于 jquery 下的文件 jquery.wordexport.js + 插件 file-saver 生成 word 文档。部分优化在代码的注释中。

在index.html引入jquery，版本自定

index.html

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

通过npm下载插件 file-saver

npm install file-saver

在当前文件夹新建文件命名为jquery.wordexport.js，优化了部分选项，代码如下：

在html及head标签中添加word以页面视图展示。详见：https://blog.csdn.net/han_xiao_xiao/article/details/106139393
在body中添加表格样式style。
文件中图片的src及Content-Location为同样的链接与之对应（原为base64的图片链接改为随机的10位字符串做引用，可以减少文件大小及部分word打开卡死的兼容问题）
同样Content-Transfer-Encoding 会因为base64图片格式代码展示为一行可能导致部分word打开卡死问题，优化成每80个字符进行换行操作。

// `jquery.wordexport.js`
if (typeof jQuery !== 'undefined' && typeof saveAs !== 'undefined') {;(function ($) {$.fn.wordExport = function (fileName) {fileName =typeof fileName !== 'undefined' ? fileName : 'jQuery-Word-Export'var statics = {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>\n_html_</html>',/* html中添加打开word以页面视图展示 */'\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</head>\n',/* head中添加打开word以页面视图展示 */'<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中添加style表格样式 */body: `<body><style>table {border: 1px solid #a4a4a4;// border-collapse: collapse;border-spacing: 0;font-size: 12px;text-align: center;}th,td {padding:6pt 0;text-align: center;border: 1pt solid #a4a4a4;}</style>_body_</body>`,},}var options = {maxWidth: 600,}// 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')for (var i = 0; i < img.length; i++) {// Calculate dimensions of output imagevar w = Math.min(img[i].width, options.maxWidth)var h = img[i].height * (w / img[i].width)// Create canvas for converting image to data URLvar canvas = document.createElement('CANVAS')canvas.width = wcanvas.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/jpg')// $(img[i]).attr('src', img[i].src)/* 原先是通过base64路径作为引用，文件较大且会有卡死问题，改为随机数作为引用 */$(img[i]).attr('src', Math.floor(Math.random() * 10000000000) + '.png')img[i].width = w / 1.5img[i].height = h / 1.5// Save encoded image to arrayimages[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 datavar 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'/* 原先为引用完的base64，不换行文件会有卡死问题，改为80字符换行且可行 */mhtmlBottom += images[i].data.replace(/.{80}/g, '$&\n') + '\n\n'}mhtmlBottom += '--NEXT.ITEM-BOUNDARY--'var styles = ''// Aggregate parts of the file togethervar fileContent =statics.mhtml.top.replace('_html_',statics.mhtml.head.replace('_styles_', styles) +statics.mhtml.body.replace('_body_', markup.html())) + mhtmlBottom// Create a Blob with the file contentsvar 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)')}
}

模板引用

<template><div id='report'></div>
</template>
<script>
import saveAs from 'file-saver'
import './jquery.wordexport'export default {name:'',methods(){tapExport() {$('#report').wordExport('《报告》')}}}
</script>

以上就是问题的解决方案。

部分转载：https://blog.csdn.net/dwb123456123456/article/details/84875706

js 导出word文档相关推荐

使用jquery.wordexport.js导出word文档设置行间距不生效问题
在使用jquery.wordexport.js导出word文档时在js里设置的style margin-top不生效生成的doc还是没有行间距一通百度后发现没用解决方法后来发现有位 ...
js导出word文档可以兼容IE8+浏览器适配其他浏览器
js导出word文档,兼容IE8浏览器其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js exc ...
vue项目+element表格前端使用纯js导出word文档
详细请读https://www.jianshu.com/p/0de31429b12a这篇文章首先安装各种工具: -- 安装 docxtemplater cnpm install docxtempla ...
js 导出word 文档 doc docx
在做项目时,要将富文本编辑器,或是html内容导出为word. 先引入文件保存js <script src="FileSaver.js"></script> ...
如何导出word文档
前言一般导出word,是后台做的功能,如果确实需要前端做,可以借助jQuery的wordexport.js导出word文档提示:以下是本篇文章正文内容,下面案例可供参考一.使用步骤 1.引入文件 ...
vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍要实现前端纯js导出word文档,我们需 ...
vue 生产word_nodejs(officegen)+vue(axios)在客户端导出word文档
前言我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息我使用的前端框架是Vue.js.后台使用的是node.js node.js生成和导出word文档我参考的是下面这两篇文章,写 ...
vue 导出word文档（包括图片）
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
PHP导出word文档的简单实现方法(可导出图片)
这是看了网上几篇关于PHP导出word文档的文章之后,本人改进一下的方法,可以导出带图片的,以下是demo. $row = M('Article')->where(array('id'=> ...

js 导出word文档

js 导出word文档相关推荐

最新文章

热门文章