分布式系統中的CAP理論，面試必問，你理解了嘛？
對于剛剛接觸分布式系統的小伙伴們來說，一提起分布式系統，就感覺高大上，深不可測。而且看了很多書和視頻還是一臉懵逼。這篇文章主要使用大白話的方式，帶你理解一下分布式系統
點擊導出word按鈕，將頁面任意指定區域的內容，導出為word文檔。
實現代碼如下，復制粘貼即可直接使用。
如果你有時間，具體問題梳理、代碼分析、知識總結，可見第三部分。
參考網上使用最多的方式，使用 FileSaver.js 和 html-docx-js 庫（或其它將HTML內容轉換為Word文檔的庫）來在Vue組件中導出內容為Word文檔。
但是這種方式只能在服務端實現，在瀏覽器端使用會報錯，這是因為瀏覽器的安全策略限制了對文件系統的直接訪問，以防止惡意腳本濫用用戶的文件系統。
為了避免報錯，您可以考慮以下解決方案：
在assets文件夾下新建js文件夾，然后在js文件夾下新建文件exportToWord.js，把下面代碼放進去。
// 導出Wordexport const exportToWord = (id, name) => {// 獲取選中區域Htmlconst 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}`;}在需要的組件中引入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>這個比較簡單，相信大家都會，這里簡單提一下。
對于組件可以用ref，對于元素可以用id。
通過new Blob對象，將Html類型數據轉換為生成Word文檔的二進制數據。
關于Blob對象：
Blob（Binary Large Object）是JavaScript中的一個接口，用于表示不可變的、原始數據的類似文件的對象。
它通常用于處理二進制數據，例如圖像、音頻、視頻等。
Blob對象可以包含任意類型的數據，包括文本、數組緩沖區和其他Blob對象。
Blob對象在處理文件上傳、數據傳輸和媒體處理等場景中非常有用。您可以將Blob對象發送到服務器、保存到本地文件系統或使用其他API進行進一步處理。
Blob(blobParts, options)：構造函數接受兩個參數。
第一個參數blobParts是一個數組，其中包含將被包含在Blob對象中的數據。數組的元素可以是字符串、ArrayBuffer、ArrayBufferView、Blob對象或其他類似對象。
第二個參數options是一個可選的對象，用于指定Blob對象的屬性。
在options參數中，可以使用以下屬性：
屬性：
方法：
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對象的內容。
通過a元素的 download 屬性，來實現文件的導出下載。
在 HTML 中，a元素的 download 屬性用于指定一個下載鏈接，告訴瀏覽器該鏈接是要被下載而不是在瀏覽器中打開。這樣，當用戶點擊鏈接時，瀏覽器會彈出一個下載對話框，提示用戶保存文件到本地設備。
download 屬性的值可以是一個文件名，用于指定用戶保存文件時的默認文件名。當用戶點擊下載鏈接時，瀏覽器會使用該值作為默認文件名，但用戶仍然可以選擇其他文件名保存。
請注意，download 屬性并不是所有瀏覽器都支持的新特性。特別是在移動設備上，某些瀏覽器可能會忽略該屬性并在瀏覽器中打開鏈接。因此，在使用 download 屬性時，最好提供一個備用方案，例如在鏈接的文本或旁邊添加一段說明，告訴用戶右鍵點擊鏈接并選擇 "保存鏈接" 或類似選項來下載文件。
本文鏈接：http://www.www897cc.com/showinfo-26-39535-0.htmlVue2問題：如何在瀏覽器中導出Word文檔？四條解決方案！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Python中的元類，看這篇就夠了
下一篇： 從一筆交易充值，考慮到分布式事務處理
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號