整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者 | 大澈
大家好，我是大澈！
遇到難題，可以進問答群，問題直接群里扔，完事總有人會陪你一起搞。
建立這個平臺的初衷：
1、打造一個問答平臺，一個僅包含前端問題的平臺，讓大家可以高效處理同樣問題。
2、通過不斷積累問題，去練習大家的個人邏輯思維，并順便學習相關的知識點。
3、遇到難題，遇到有共鳴的問題，一起討論，一起沉淀，一起成長。
ONE
需求分析，問題描述
一、需求
點擊導出word按鈕，將頁面任意指定區域的內容，導出為word文檔。
二、問題
1、如何獲取指定內容？
2、如何將HTML內容轉換為Word文檔？
3、如何導出下載Word文檔？
TWO
解決問題，答案速覽
實現代碼如下，復制粘貼即可直接使用。
如果你有時間，具體問題梳理、代碼分析、知識總結，可見第三部分。
一、使用說明
參考網上使用最多的方式，使用 FileSaver.js 和 html-docx-js 庫（或其它將HTML內容轉換為Word文檔的庫）來在Vue組件中導出內容為Word文檔。
但是這種方式只能在服務端實現，在瀏覽器端使用會報錯，這是因為瀏覽器的安全策略限制了對文件系統的直接訪問，以防止惡意腳本濫用用戶的文件系統。
為了避免報錯，您可以考慮以下解決方案：
1、服務器端導出【推薦】：將生成Word文檔的邏輯放在服務器端，通過Vue組件向服務器發送請求，服務器生成并返回Word文檔的下載鏈接或文件。
2、使用其他導出方式：考慮使用其他導出方式，例如將內容轉換為PDF格式或生成HTML格式的文件，以避免瀏覽器限制。
3、考慮使用專門的Word文檔生成庫【導出復雜Word】：如果您需要在瀏覽器中生成復雜的Word文檔，可以考慮使用專門的JavaScript庫，例如docxtemplater或mammoth.js，它們提供了更完整的Word文檔生成功能。
4、考慮使用原生的方式實現【導出簡單Word】。即我們下面要說的，利用a元素的原生文件下載功能來實現Word導出。
二、代碼實例
1、在assets文件夾下新建js文件夾，然后在js文件夾下新建文件exportToWord.js，把下面代碼放進去。
// 導出Word
export const exportToWord=(id, name)=> {
// 獲取選中區域Html
const dom=document.getElementById(id)
const content=dom.innerHTML;
const convertedContent=convertToWordDocument(content);
// Html類型數據 轉換為 文件類型數據
const blob=new Blob([convertedContent], { type: 'application/msword' });
// 下載Word文檔
const link=document.createElement('a');
link.href=URL.createObjectURL(blob);
link.download=name+'.doc' || 'exported.doc';
link.click();
}
//完善Html格式
const convertToWordDocument=(content)=> {
const header=`<!DOCTYPE html><html><head><meta charset='utf-8'><title>Exported Document</title></head><body>`;
const footer=`</body></html>`;
return `${header}${content}${footer}`;
}
2、在需要的組件中引入exportToWord函數，直接調用即可。函數接收兩個參數，第一個是指定區域元素的id，第二個是導出Word文檔的名稱。
<template>
<div>
<div id="word_demo">
<h1>標題</h1>
<p style="color: green">綠色字</p>
<p style="color: red">紅色字</p>
<p style="color: dodgerblue">藍色字</p>
</div>
<button @click="downLoad('word_demo', '哈哈哈')">點擊導出word</button>
</div>
</template>
<script>
import { exportToWord } from '@/assets/js/exportToWord'
export default {
methods: {
downLoad(id, name) {
exportToWord(id, name)
},
}
}
</script>THREE
問題解析，知識總結
一、如何獲取指定內容？
這個比較簡單，相信大家都會，這里簡單提一下。
對于組件可以用ref，對于元素可以用id。
二、如何將HTML內容轉換為Word文檔？
通過new Blob對象，將Html類型數據轉換為生成Word文檔的二進制數據。
關于Blob對象：
1、簡介：
Blob（Binary Large Object）是JavaScript中的一個接口，用于表示不可變的、原始數據的類似文件的對象。
它通常用于處理二進制數據，例如圖像、音頻、視頻等。
Blob對象可以包含任意類型的數據，包括文本、數組緩沖區和其他Blob對象。
Blob對象在處理文件上傳、數據傳輸和媒體處理等場景中非常有用。您可以將Blob對象發送到服務器、保存到本地文件系統或使用其他API進行進一步處理。
2、Blob對象的構造函數接受以下參數：
Blob(blobParts, options)：構造函數接受兩個參數。
第一個參數blobParts是一個數組，其中包含將被包含在Blob對象中的數據。數組的元素可以是字符串、ArrayBuffer、ArrayBufferView、Blob對象或其他類似對象。
第二個參數options是一個可選的對象，用于指定Blob對象的屬性。
在options參數中，可以使用以下屬性：
type：指定Blob對象的MIME類型。默認值為空字符串。
endings：指定以何種方式標準化換行符。可能的值是transparent、native和\r\n。默認值是transparent。
3、以下是一些常用的Blob屬性和方法：
屬性：
Blob.size：返回Blob對象的字節大小。
Blob.type：返回Blob對象的MIME類型。
方法：
Blob.slice(start, end, contentType)：
創建并返回一個新的Blob對象，該對象包含原始Blob對象的指定字節范圍。可選參數contentType用于指定新Blob對象的MIME類型。
Blob.arrayBuffer()：
返回一個Promise，該Promise解析為一個ArrayBuffer對象，其中包含Blob對象的整個內容。
Blob.text()：
返回一個Promise，該Promise解析為一個字符串，其中包含Blob對象的文本內容。
Blob.stream()：
返回一個ReadableStream對象，可以用于流式讀取Blob對象的內容。
Blob.text()：
返回一個Promise，該Promise解析為一個字符串，其中包含Blob對象的文本內容。
Blob.stream()：
返回一個ReadableStream對象，可以用于流式讀取Blob對象的內容。
三、如何導出下載Word文檔？
通過a元素的 download 屬性，來實現文件的導出下載。
在 HTML 中，a元素的 download 屬性用于指定一個下載鏈接，告訴瀏覽器該鏈接是要被下載而不是在瀏覽器中打開。這樣，當用戶點擊鏈接時，瀏覽器會彈出一個下載對話框，提示用戶保存文件到本地設備。
download 屬性的值可以是一個文件名，用于指定用戶保存文件時的默認文件名。當用戶點擊下載鏈接時，瀏覽器會使用該值作為默認文件名，但用戶仍然可以選擇其他文件名保存。
請注意，download 屬性并不是所有瀏覽器都支持的新特性。特別是在移動設備上，某些瀏覽器可能會忽略該屬性并在瀏覽器中打開鏈接。因此，在使用 download 屬性時，最好提供一個備用方案，例如在鏈接的文本或旁邊添加一段說明，告訴用戶右鍵點擊鏈接并選擇 "保存鏈接" 或類似選項來下載文件。
- END -
spose.Words無需Microsoft Word也可在任何平臺上滿足Word文檔的一切操作需求。本文將與大家分享如何將word和圖像轉換為PDF。
將Document（文檔）轉換為Byte Array（字節數組）
本部分主要說明如何序列化Document對象以獲取表示Document的字節數組，以及如何反序列化字節數組以再次獲取Document對象。在將文檔存儲在數據庫中或準備文檔以在Web上傳輸時，通常需要此技術。
用于序列化Document對象的最簡單方法是首先使用Document類的Document.Save方法重載將其保存到MemoryStream。然后在流中調用ToArray方法，該方法返回以字節形式表示文檔的字節數組。選擇的保存格式非常重要，以確保在保存和重新加載到Document對象時保留最高保真度。 出于這個原因，建議使用OOXML格式。然后按照上述反向步驟以將字節加載回Document對象。
// For complete examples and data files, please go to https://github.com/aspose-words/Aspose.Words-for-.NET // The path to the documents directory. string dataDir=RunExamples.GetDataDir_LoadingAndSaving(); // Load the document from disk. Document doc=new Document(dataDir + "Test File (doc).doc"); // Create a new memory stream. MemoryStream outStream=new MemoryStream(); // Save the document to stream. doc.Save(outStream, SaveFormat.Docx); // Convert the document to byte form. byte[] docBytes=outStream.ToArray(); // The bytes are now ready to be stored/transmitted. // Now reverse the steps to load the bytes back into a document object. MemoryStream inStream=new MemoryStream(docBytes); // Load the stream into a new document object. Document loadDoc=new Document(inStream);
使用往返（Roundtrip）信息將文檔轉換為HTML
當文檔保存為HTML，MHTML或EPUB時，Aspose.Words可以導出往返信息。HtmlSaveOptions.ExportRoundtripInformation屬性指定在保存為HTML，MHTML或EPUB時是否寫入往返信息。 HTML的默認值為true，MHTML和EPUB的默認值為false。在HTML文檔加載回Document對象期間，保存往返信息允許恢復文章屬性，例如制表位，注釋，頁眉和頁腳。
如果為true，則將往返信息導出為 - aw - *相應HTML元素的CSS屬性。
如果為false，則不會將往返信息輸出到生成的文件中。
下面的代碼示例顯示了在轉換Doc-> Html-> Doc時如何導出往返信息。
// For complete examples and data files, please go to https://github.com/aspose-words/Aspose.Words-for-.NET // The path to the documents directory. string dataDir=RunExamples.GetDataDir_LoadingAndSaving(); // Load the document from disk. Document doc=new Document(dataDir + "Test File (doc).doc"); HtmlSaveOptions options=new HtmlSaveOptions(); // HtmlSaveOptions.ExportRoundtripInformation property specifies // Whether to write the roundtrip information when saving to HTML, MHTML or EPUB. // Default value is true for HTML and false for MHTML and EPUB. options.ExportRoundtripInformation=true; doc.Save(dataDir + "ExportRoundtripInformation_out.html", options);
點擊“了解更多”下載產品最新版
↓↓↓
個冬天（互聯網寒冬）對很多前端er來說是難過的，經濟不景氣，各大公司紛紛停止初級人員的招聘。然而災難卻不止如此，很多公司為了節約過冬成本，紛紛開啟裁員模式。很不幸，作為應屆生的我，在一瞬間感受到了公司的冷漠無情。
被裁的第一個周末，幾個大佬們一起坐了坐，紛紛表示愿意幫我內推，于是開啟了我的面試之旅。我花了三周時間，大概面了有15家公司，這些公司有大有小，有國企也有互聯網，我將撿一些我個人感覺還不錯的公司對大家進行一個分享，希望能對迫于寒冬裁員浪潮下的小伙伴有一些幫助。
1.Unicareer
這是一家做職業教育的公司。面試就一輪直接就是CTO面試，CTO很年輕，很帥，很有能力，主要問了這些問題：
由于是第一家面試，也沒有做足充分準備，上面這些題我基本都沒有答上來，他家的HR很負責，就算你沒有通過也會告訴你結果。
2. 跟誰學
同樣是一家做教育的公司，這家公司秋招的時候投過，但是一只沒有去面試，直接微信聯系的HR。由于我比較菜，面試同樣只進行了一輪，主要問了這些問題：
上來的動畫效果我沒有寫出來，數組的各種方法又把我搞懵逼，整個面試不超過半小時就GG了。
3. 老虎證券
美港股證券公司，財大氣粗，去年秋招的時候面過，當時還拒了。通過BOSS直聘聯系約面。同樣一面跪，主要問了這些問題：
面試發揮的很差，不過面試官小姐姐特別有耐心，聊了兩個多小時，基本上全程教我寫代碼，最后斗膽要了下小姐姐微信，這次面試失敗對我打擊很大，讓我嚴重意識到了自己的不足。正好是個周五，基本上通宵看完阮一峰的ES6那本書。
4. 快手
南抖音北快手，雖然我不玩，在網上查了一下面經，據說這家公司超級難。面試先做筆試題，還好之前有準備，兩道題沒做出來，一道是利用localStorage根據請求響應頭做一個瀏覽器緩存的插件，一個是返回給定字符串的全排列結果。一面主要問了這些：
一面確實有些東西不知道，不過一面小哥說會有二面的，順便蹭了個飯，快手的飯挺好吃的。二面是個禿頂小哥，主要問了這些：
二面還是暴露了些問題的，等了半小時，二面小哥告訴我技術棧不符合，培養成本較高，還讓我好好看下ES6的代碼轉成ES5后的結果。雖然被拒了，不過也沒那么傷心，面試前安慰自己能撐過一輪就是賺了。
5. 百度
百度是百度網盤部門，不在百度大樓，在鵬寰大廈。去年校招也收到百度面試，不過因能力問題沒有敢去。一面是個小姐姐，主要問了這些問題：
一面面到這里心里涼了半截，已經做好回家復習的準備了，小姐姐說暫時聯系不到二面，要不讓我回家等通知。絕望中走了1公里，接到電話說可以面一下二面，遂小跑回去等待二面。二面是個小哥，他老婆竟然是我上家同事，二面主要問了這些問題：
二面后來跟小哥坦白了，數據結構很多都忘了，說了很多自己學習技術上的事。小哥選擇給了個友情三面。
三面是百度網盤的負責人，是個女的，感覺之前在哪里見過，技術的東西沒有聊，聊了很多前端學習路線上的事，針對我的離職原因教育了我一番（我不是說的裁員），并表明評級不到t4，社招是沒有t4+以下的hc的，讓我再努努力，希望下次再來面百度的時候可以收獲offer。在這里還是感謝下百度的三位面試官，確實我和他們的差距不是一般的大。尤其一面的小姐姐，就一道題讓我學到了很多很多，也為我后面遇到類似題目埋下伏筆。
6. 貝殼金服（理房通）
給貝殼做支付的，金融公司，財大氣粗。自己在boss上聯系的，抱著試試看的心態來面試的。他家面試一共5輪，2輪技術，1輪合伙人，1輪HR，最后又來了1輪電話技術面。一面直接讓看一套筆試題，然后告訴他答案，此外還問了這些問題：
一面雖然有些React的東西不知道，但是面試官還是給了二面。二面是個架構，問的東西基本全是網絡相關，具體如下：
二面的面試官不太懂前端，我也不太懂網絡，不過跟他說了說我項目中的一些優化操作，還是給了后面的面試。隔了3天接到電話說還有一輪電話面試，電話面試主要問了這些問題：
除了死循環那個，別的回答的都不錯，也是第二天就接到了offer，第一個offer，內心感慨：找工作真難啊。
7. 蛋殼公寓
長租公寓，我現在住的就是蛋殼公寓。公司HR統一內推的，技術面一共三輪。一面主要問了這些問題：
一面小哥很年輕，問的東西也比較少，聊項目偏多。二面來個大叔，氣場十足，主要問了這些：
二面問的東西偏實際了一些，二面透露他們的項目有Vue和JQuery混搭的風格。三面是個領導，隔了三四天約的三面，主要問了這些：
其余的都在問個人平時怎么學習的，感覺蛋殼面試相對輕松，可能是因為工作經驗的關系，并沒有給我發offer。
8. 一點資訊
看新聞的平臺，跟頭條類似。之前約面放過HR鴿子，電話解釋了半天，同意再給個機會，技術面3輪，1輪HR面。一面小哥胖乎乎萌萌噠，主要問了這些問題：
一面我還可以hold住，萬萬沒想到的是二面。二面小哥比一面小哥看上去還年輕，主要問了這些問題：
二面快結束的時候，我就問小哥，你們到底要啥樣的人，小哥說啥都要，他說簡單的同事之前跟他反映過了，他就不問了，他同意有三面，我很詫異，直接問他啥都不會都能有三面嗎？小哥答曰：還可以吧。三面來了個領導，跟他閑聊直接問起我上家公司的領導，套了套近乎，不過面試起來還是比較犀利的：
其他的基本就是在聊一些項目中的優化問題，簡單說了下我這邊都是通過減少請求對其進行優化。本來想放棄，沒想到讓我等下HR面，HR面多夸了夸這幾位面試官和公司環境，說了下自己確實能力還不夠，還有待提高，并再一次對之前約面放鴿子事件表示抱歉。沒想要HR竟然主動加我微信，兩天后的周四，跟我說同意發放offer，我欣喜若狂。
9. 用友
做ERP起家，老牌軟件公司。被分到了用友醫療這個子部門，技術面就一輪，主要問了這些問題：
整體面試難度不大，應該是這里面最輕松的一個。用友的飯真好吃（老板～再來碗米飯）。
10. VIPKID
在線少兒英語教學（我面的教育類公司好多），被不知道哪個獵頭給內推了下，面了兩面。說是會在下周安排三面。一面主要問了這些問題：
一面小哥很可愛，問的問題也不是很多，直接進入二面。二面主要問了這些：
二面小哥告訴我三面負責人旅游去了，讓我準備下三面。整個面試過程一個半小時左右，聊得比較開心，技術棧是Vue，也比較對口。
總結
可能是我工作經驗不夠的原因，面試還是更側重基礎的東西多一些，JS繼承、閉包、this指向基本哪家都會考，手寫bind、promise、節流防抖函數也有一些公司會考，還會考一些ES6的新特性經過babel編譯成ES5的結果（這個真是吃了大虧），CSS水平垂直居中、多列等高布局、清除浮動考的很多。此外框架的生命周期函數、雙向數據綁定原理考得很多，http則主要考察緩存相關的知識。
三周面下來，最大的感觸就是累。面試是真的累，身體累，心也累。一天要跑2-3家，最多的一天跑了100里路。每天復習到深夜，越復習發現不會的越多。同事們收到offer后，自己也著急，有的都已經入職了，我還在東跑西跑。不過還好功夫不負有心人吧，拿的這兩個offer自己也比較滿意。希望這篇水文可以幫助更多在寒冬中迷失的前端er早日找到理想的歸宿。
關注我，私信回復“前端資源”獲取我總結的面試資料
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
