前端将页面内容包含图片下载为word文件

阅读：评论：0

主要是使用jquery方法
jquery.wordexport.js
FileSaver.js
需要引入几个文件
原生html和vue中的使用方法差不多

在静态文件 html header中引入三个文件 (文件内容再最后)
下面是页面内容

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href=""><script src="./jquery.js"></script><script src="./FileSaver.js"></script><script src="./jquery.wordexport.js"></script><title></title></head><body><div id="app"></div><!-- built files will be auto injected --><div id="clickDom">点击下载</div><div id="downDom"><p>下载内容</p><img src='.jpg' /></div></body><script>var downBtn = ElementById('clickDom')lick = function(){let fileName = '测试下载word'$('#downDom').wordExport(fileName);}</script>
</html>

vue中的方法在public中找到index.html 引入对应的文件下面是首页index.vue的内容

<template><div class="index">首页<div @click="downWord">下载</div><div id="downDom">内容</div></div>
</template><script>//引入jsexport default {name: "index",data(){return{}},created(){},methods:{downWord(){$('#downDom').wordExport('123');}}}
</script><style scoped></style>

对应的文件存放位置

jquery我这里是将文件保存到了本地可以引入链接
.2.4/jquery.js

<script src=".2.4/jquery.js"></script>

FileSaver.js 文件

/* FileSaver.js* A saveAs() FileSaver implementation.* 2014-11-29** By Eli Grey, * License: X11/MIT*   See .js/blob/master/LICENSE.md*//*global self */
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true *//*! @source .js/blob/master/FileSaver.js */var saveAs = saveAs// IE 10+ (native saveAs)|| (typeof navigator !== "undefined" &&navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))// Everyone else|| (function(view) {"use strict";// IE <10 is explicitly unsupportedif (typeof navigator !== "undefined" &&/MSIE [1-9]./.test(navigator.userAgent)) {return;}vardoc = view.document// only get URL when necessary in case Blob.js hasn't overridden it yet, get_URL = function() {return view.URL || view.webkitURL || view;}, save_link = ateElementNS("", "a"), can_use_save_link = "download" in save_link, click = function(node) {var event = ateEvent("MouseEvents");event.initMouseEvent("click", true, false, view, 0, 0, 0, 0, 0, false, false, false, false, 0, null);node.dispatchEvent(event);}, webkit_req_fs = view.webkitRequestFileSystem, req_fs = questFileSystem || webkit_req_fs || RequestFileSystem, throw_outside = function(ex) {(view.setImmediate || view.setTimeout)(function() {throw ex;}, 0);}, force_saveable_type = "application/octet-stream", fs_min_size = 0// See =375297#c7 and// .js/commit/485930a#commitcomment-8768047// for the reasoning behind the timeout and revocation flow, arbitrary_revoke_timeout = 500 // in ms, revoke = function(file) {var revoker = function() {if (typeof file === "string") { // file is an object URLget_URL().revokeObjectURL(file);} else { // file is ve();}};if (view.chrome) {revoker();} else {setTimeout(revoker, arbitrary_revoke_timeout);}}, dispatch = function(filesaver, event_types, event) {event_types = [].concat(event_types);var i = event_types.length;while (i--) {var listener = filesaver["on" + event_types[i]];if (typeof listener === "function") {try {listener.call(filesaver, event || filesaver);} catch (ex) {throw_outside(ex);}}}}, FileSaver = function(blob, name) {// First try a.download, then web filesystem, then object URLsvarfilesaver = this, type = pe, blob_changed = false, object_url, target_view, dispatch_all = function() {dispatch(filesaver, "writestart progress write writeend".split(" "));}// on any filesys errors revert to saving with object URLs, fs_error = function() {// don't create more object URLs than neededif (blob_changed || !object_url) {object_url = get_URL().createObjectURL(blob);}if (target_view) {target_view.location.href = object_url;} else {var new_tab = view.open(object_url, "_blank");if (new_tab == undefined && typeof safari !== "undefined") {//Apple do not allow window.open, see .location.href = object_url}}adyState = filesaver.DONE;dispatch_all();revoke(object_url);}, abortable = function(func) {return function() {if (adyState !== filesaver.DONE) {return func.apply(this, arguments);}};}, create_if_not_found = {create: true, exclusive: false}, adyState = filesaver.INIT;if (!name) {name = "download";}if (can_use_save_link) {object_url = get_URL().createObjectURL(blob);save_link.href = object_url;save_link.download = name;click(save_link);adyState = filesaver.DONE;dispatch_all();revoke(object_url);return;}// Object and web filesystem URLs have a problem saving in Google Chrome when// viewed in a tab, so I force save with application/octet-stream// =91158// Update: Google errantly closed 91158, I submitted it again:// =389642if (view.chrome && type && type !== force_saveable_type) {slice = blob.slice || blob.webkitSlice;blob = slice.call(blob, 0, blob.size, force_saveable_type);blob_changed = true;}// Since I can't be sure that the guessed media type will trigger a download// in WebKit, I append .download to the filename.// .cgi?id=65440if (webkit_req_fs && name !== "download") {name += ".download";}if (type === force_saveable_type || webkit_req_fs) {target_view = view;}if (!req_fs) {fs_error();return;}fs_min_size += blob.size;req_fs(view.TEMPORARY, fs_min_size, abortable(function(fs) {Directory("saved", create_if_not_found, abortable(function(dir) {var save = function() {File(name, create_if_not_found, abortable(function(file) {ateWriter(abortable(function(writer) {writeend = function(event) {target_view.location.href = URL();adyState = filesaver.DONE;dispatch(filesaver, "writeend", event);revoke(file);};r = function() {var error = ;if (de !== error.ABORT_ERR) {fs_error();}};"writestart progress write abort".split(" ").forEach(function(event) {writer["on" + event] = filesaver["on" + event];});writer.write(blob);filesaver.abort = function() {writer.abort();adyState = filesaver.DONE;};adyState = filesaver.WRITING;}), fs_error);}), fs_error);};File(name, {create: false}, abortable(function(file) {// delete file if it ve();save();}), abortable(function(ex) {if (ex.code === ex.NOT_FOUND_ERR) {save();} else {fs_error();}}));}), fs_error);}), fs_error);}, FS_proto = FileSaver.prototype, saveAs = function(blob, name) {return new FileSaver(blob, name);};FS_proto.abort = function() {var filesaver = adyState = filesaver.DONE;dispatch(filesaver, "abort");};adyState = FS_proto.INIT = 0;FS_proto.WRITING = 1;FS_proto.DONE = 2; =writestart =progress =write =abort =r =writeend =null;return saveAs;
}(typeof self !== "undefined" && self|| typeof window !== "undefined" && window|| t
));
// `self` is undefined in Firefox for Android content script context
// while `this` is nsIContentFrameMessageManager
// with an attribute `content` that corresponds to the windowif (typeof module !== "undefined" && module !== null) {ports = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {define([], function() {return saveAs;});
}

jquery.wordexport.js

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.0nContent-Base: " + location.href + "nContent-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"nn--NEXT.ITEM-BOUNDARYnContent-Type: text/html; charset="utf-8"nContent-Location: " + location.href + "nn<!DOCTYPE html>n<html>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",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'))ve();});// 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 = ateElement("CANVAS");canvas.width = w;canvas.height = h;// Draw image to canvas//startvar img_id = '#' + img[i].idimg[i].src = img[i].place("https", "http"); //处理导出不显示的问题,如果在某些代码中出现了图片无法显示问题，可以加入该代码$(canvas).attr("id", "test_word_img_" + i).width(w).height(h).insertAfter(img_id); //注释掉img处理的其他代码//end// var context = Context('2d');// context.drawImage(img[i], 0, 0, w, h);// // Get data URL encoding of image// var uri = DataURL("image/png/jpg");// $(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 datavar mhtmlBottom = "n";for (var i = 0; i < images.length; i++) {mhtmlBottom += "--NEXT.ITEM-BOUNDARYn";mhtmlBottom += "Content-Location: " + images[i].location + "n";mhtmlBottom += "Content-Type: " + images[i].type + "n";mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "nn";mhtmlBottom += images[i].data + "nn";}mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";//TODO: load css from included stylesheetvar styles = style;// Aggregate parts of the file togethervar fileContent = p.replace("_html_", static.place("_styles_", styles) + static.place("_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") {("jQuery Word Export: missing dependency (jQuery)");}if (typeof saveAs === "undefined") {("jQuery Word Export: missing dependency (FileSaver.js)");}
}

当前方法在部分样式时可能不是太完美555555~

本文发布于:2024-02-03 05:29:01，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170690933948953.html

上一篇：C# 使用Microsoft.Office.Interop.Word 将WORD转成PDF

标签：图片下载页面文件内容 word

留言与评论（共有 0 条评论）