js jquery jquery.wordexport.js 實現導出word

因爲工做須要，將一個頁面導出word文檔，主要是簡歷！通過百度搜索以後，沒找到結果，無奈之下只能求助Google，意外發現jquery一款插件能夠實現這個功能！並且效果還算能夠！

基本能夠實現想要的功能！

首先須要的js文件以下，貼出github地址，你們自由下載！

https://github.com/eligrey/FileSaver.js/

https://github.com/markswindoll/jQuery-Word-Export

首先你要引入jquery 和FileSaver.js

<script src="http://jquery.min.js"></script>
<script src="FileSaver.js"></script>

 必定先引入以上兩文件以後再引入jquery.wordexport.js

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

須要處處的內容這樣命名,id名字本身隨意，注意對應下方的jquery調用

<div id="page-content">

Your content here

</div>

 

使用方法，建立一個導出的按鈕例如：

<a class="word-export" href="javascript:void(0)"> 導出 </a>

 js代碼以下

<script type="text/javascript">
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$("#page-content").wordExport();
});
});
</script>

但願對你有用

 

應用過程當中可能會遇到報錯，主要是由於圖片致使的！

我是這樣解決的，大概在36行左右，找到以下代碼，按照下方演示註釋，添加相應代碼以後，應該就能夠

 

 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);
                // Create canvas for converting image to data URL

//這是添加的代碼--------------------------------------------
                var img_id = "#"+img[i].id;
                $('<canvas>').attr("id", "test_word_img_" + i).width(w).height(h).insertAfter(img_id);
//-------------------------------------------------  
//下面是註釋的代碼              
//                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");
//                $(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)
//                };
            }