Web Report save as mhtml file

本文介绍了一种在ASP环境中利用CDO2000 COM组件生成MHTML文件的方法,该方法能够将完整的网页及其资源打包成单个文件,便于管理和下载。
最近遇到一个问题,客户的环境只有ASP 3.0,要求输出的Report有一些复杂的图表,使用OWC倒是直接可以输出图表的图片,直接设置img的src就可以generate on the fly,但问题是客户要求这些report必须以某种文件形式保存起来,供客户下载,客户并没有指定文件格式,但要求单个文件一个report以便管理。项目的时间很紧,一眼看起来,这样的需求,pdf文件是一个不错的选择,但因为一时没有找到免费的COM组件用以生成pdf,所以只好放弃。

MHTML是一种直接把html所有资源文件内嵌为MIME的一种文件格式,主要用于生成html格式的邮件内容。后缀mht或mhtml,直接可以使用IE打开,FireFox也有一些插件支持浏览mhtml文件。ASP的示例代码:
[code]
Dim iConf 'As New CDO.Configuration
Dim Flds 'As ADODB.Fields
set iConf = Server.CreateObject("CDO.Configuration")

Dim iMsg 'As New CDO.Message
set iMsg = Server.CreateObject("CDO.Message")

dim stm
set stm = Server.CreateObject("ADODB.Stream")
stm.Type = 2
stm.Charset = "US-ASCII"
stm.open

with iMsg
Set .Configuration = iConf
.BodyPart.Charset = "GBK"
.CreateMHTMLBody "http://localhost/mail.html", 0
.DataSource.SaveToObject stm, "_Stream"
stm.SaveToFile Server.MapPath("/dev/") & "\emaill.mthml"
end with
[/code]
使用CDO 2000 COM组件,可以直接从一个url得到所有的页面资源文件,并生成mthml格式的Stream,保存下来就是需要的mhtml文件了。
if ( typeof jQuery !== "undefined" && typeof saveAs !== "undefined" ) { (function ( $ ) { $.fn.wordExport = function ( fileName , style ) { 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 canvas = document.createElement( "canvas" ); for ( var i = 0; i < img.length; i++ ) { // Calculate dimensions of output image // var w = Math.min( img[i].width , options.maxWidth ); // var h = img[i].height * (w / img[i].width); var w = img[i].width; var h = img[i].height; // Create canvas for converting image to data URL canvas.width = w; canvas.height = h; // Draw image to canvas // 修改代码 ------------start var img_id = "#" + img[i].id; img[i].src = img[i].src.replace( "https" , "http" ); //处理导出不显示的问题 // console.log( img[i] ); $( canvas ).attr( "id" , "test_word_img_" + i ).width( w ).height( h ).insertAfter( img_id ); // 修改代码 ------------end 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" ); $( img[i] ).attr( "src" , img[i].src ); img[i].width = w; img[i].height = h; // Save encoded image to array images[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 data var 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"; } mhtmlBottom += "--NEXT.ITEM-BOUNDARY--"; //TODO: load css from included stylesheet var styles = style + "body{color:#000} .widthTd{white-space: nowrap} select{border:0;outline:0}"; // 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 + ".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)" ); } } 如何修改
最新发布
08-29
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值