html通过js导出到word

所需插件:html2canvas.js和jquery.wordexport.js.

注意事项:

  • html2canvas中如果遇到跨域的图片,首先让后端修改请求头,其次设置html2canvas中的option:

 var opts = {
 scale: scale, // 添加的scale 参数
 dpi: window.devicePixelRatio,
 canvas: canvas, //自定义 canvas
 logging: true, //日志开关,便于查看html2canvas的内部执行流程
 width: width, //dom 原始宽度
 height: height,
 allowTaint: false, //允许污染
 useCORS: true // 【重要】开启跨域配置
 };

其中allowTaint,如果allowTaint为true时,代码报错,提示画布被污染,设置为false可正常执行。

  • jquery.wordexport中需要修改源代码才能在视图中显示你导出的内容,修改部分为,看下面自己对照。其中styles我没去测试,引入的样式,我是通过截图保存的,如果需要导出的内容为带样式文本,自己研究下。
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><!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:GrammarState>Clean</w:GrammarState><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]-->\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>"@page WordSection1{size:595.3pt 841.9pt;margin:72.0pt 90.0pt 72.0pt 90.0pt;//默认margin值表示的页边距为 上下边距2.54厘米、左右边距3.17厘米"mso-header-margin:42.55pt;mso-footer-margin:49.6pt;mso-paper-source:0;}"@page WordSection1{size:595.3pt 841.9pt;margin:36.0pt 36.0pt 36.0pt 36.0pt;//该margin值表示的页边距为 上下左右边距都为1.27厘米"mso-header-margin:42.55pt;mso-footer-margin:49.6pt;mso-paper-source:0;}\n_styles_\n</style>\n</head>\n",body: "<body>_body_</body>"}};

js中加的样式对于文本应该有效,我保存的是图片,父元素没有相应的class,没有效果。

var options = {maxWidth: 686};

这是修改word中显示内容的最大宽度。

  • wordexport.js是基于FileSaver.js的基础的,引入到wordexport前面就行,使用方法见fileSave

另外导出的如果为pdf格式,可以用jsPdf.debug.js,此插件分装的功能多,即使是图片也有分页。

 

 

(42 Posts)