1. vue導出word文檔打開報錯,內容有問題
可能是word文檔的格式有問題，可以嘗試重新生成一個文檔，或者使用其他文檔格式試試。
2. canvas怎麼導入word
一、使用的插件
html-docx-js
二、整體思路
因為canvas是運行在內存中的，所以不能簡單的通過dom獲取canvas圖片，需要手動的先將canvas轉為image。
三、實現
先克隆要下載的DOM的副本。
因為canvas是運行在內存中的，所以也不能通過cloneNode方法克隆下來（克隆下來是空的）。我們這里將原DOM中的canvas轉成圖片，然後插入到副本的對應位置，這樣操作不會影響原DOM。
將DOM副本傳入插件，生成文件對象，並下載下來。
import htmlDocx from 'html-docx-js/dist/html-docx'
/*
步驟1 ：因為canvas是運行在內存中的，所以也不能通過cloneNode方法克隆下來（克隆下來是空的），
所以先克隆再在克隆的dom上進行操作是不可取的。所以需要在原DOM上生成img，
設置display: none從而使圖片不影響頁面展示，並插入到對應canvas元素之前（為了保證順序不變）。
*/
const app = document.getElementById('app')
const cloneApp = app.cloneNode(true)
const canvases = app.getElementsByTagName('canvas')
const cloneCanvases = cloneApp.getElementsByTagName('canvas')
const promises = Array.from(canvases).map((ca, index) => {
return new Promise((res) => {
const url = ca.toDataURL('image/png', 1)
const img = new Image()
img.onload = () => {
URL.revokeObjectURL(url)
res()
}
img.src = url
// 插入clone的dom的canvas之前
cloneCanvases[index].parentNode.insertBefore(img, cloneCanvases[index])
})
})
/*
步驟2 ：刪除掉canvas元素
*/
// 刪除clone的dom中的所有的canvas
const cloneCanvas = cloneApp.getElementsByTagName('canvas')
Array.from(cloneCanvas).forEach((ca) => ca.parentNode.removeChild(ca))
/* 步驟3 ：將dom副本傳入插件，生成文件對象，並下載下來 */
Promise.all(promises).then(() => {
const converted = htmlDocx.asBlob(`
<!DOCTYPE html>
<html lang="en">
${document.head.outerHTML}
<body>
${cloneApp.outerHTML}
</body>
</html>`)
saveAs(converted, 'test.docx')
})
// 下載文件
function saveAs (blob, fileName) {
const a = document.createElement('a')
const url = URL.createObjectURL(blob)
a.href = url
a.download = fileName
a.display = 'none'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
打開CSDN，閱讀體驗更佳
Canvas轉化為圖片下載,導出Word_canvas轉word-Javascript文檔類...
1.通用的canvas轉化圖片下載是沒有後綴名的,這個可以有;2.因為canvas是頁面載入之後才canvas轉word更多下載資源、學習資料請訪問CSDN文庫頻道.
繼續訪問
html5中word文件閱讀,使用 HTML5 Canvas 進行數據可視化_汽車之家...
根據W3C HTML5 規范 (http://www.wendangwang.com/TR/html5/the-canvas-element.html),canvas 元素「為腳本提供取決於解析度的點陣圖畫布,該畫布可用於動態呈現圖形、游戲圖形或其他可視圖像。」Canvas 實際是在兩個 W3C 規范中定義的...
繼續訪問
Canvas轉化為圖片下載，導出Word
1.通用的canvas轉化圖片下載是沒有後綴名的，這個可以有； 2.因為canvas是頁面載入之後才導出，這樣圖像就不能導出到word，資源中先把canvas生成的圖片放到img中，在隱藏canvas，然後再導出，ok
html-docx-js, 在瀏覽器中，將HTML文檔轉換為 DOCX.zip
html-docx-js, 在瀏覽器中，將HTML文檔轉換為 DOCX html-docx-js這是一個非常小的庫，它是將HTML文檔轉換為DOCX格式的cap，它由Microsoft和onward使用。 它通過使用稱為'altchunks'的特性來在瀏覽器中執行轉換。 簡而言之，它允許將內容嵌入到不同的標
最新發布 純前端導出word文件
jszip-utils是與jszip一起使用的跨瀏覽器的工具庫jszip是一個用於創建、讀取和編輯.zip文件的JavaScript庫，且API的使用也很簡單。FileSaver.js 是在客戶端保存文件的解決方案，非常適合需要生成文件，或者保存不應該發送到外部伺服器的敏感信息的應用。
繼續訪問
《web課程》第二節
宋體、黑軟雅黑
繼續訪問
Javascript cloneNode無法克隆事件
cloneNode的使用 var box = document.querySelector('.box'); // 影子克隆: 只克隆節點本身 var box1 = box.cloneNode(false); // 深度克隆: 克隆節點以及所有子節點 var box2 = box.cloneNode(true); 無法克隆非內聯事件 使用原生克隆方法之克隆屬性和內聯事件，對於通過事件...
繼續訪問
用Canvas實現截取網頁內容保存為圖片
最近有個客戶提出需求，要把報表導出成電子版，什麼格式都行。 當時我想啊，轉成word、Excel不可取，轉成pdf可以完整保留頁面樣式，所以就找各種html轉pdf的插件，也試了pechkin、itextsharp等等，然後就發現一個致命的問題。 我的數據是js綁定的，頁面里點和線的高度也是根據參照物在頁面中的高度計算的，所以要等數據載入完成後再轉換，而這兩個插件都沒轉成功。 所以就想啊，只
繼續訪問
html5 canvas word,使用 HTML5 Canvas 進行數據可視化
圖 1 已設置樣式的空白 Canvas 元素使用畫布時，您將在 JavaScript 中執行大多數工作，可通過 JavaScript 利用畫布繪圖上下文公開的 API 來操作圖面的每個像素。要獲取畫布繪圖上下文，您需要從 DOM 獲得您的 canvas 元素，然後調用該元素的 getContext 方法。var _canvas = document.getElementById('chart');...
繼續訪問
Python讀取本地HTML中的canvas以圖片形式存入Word文檔
Python讀取本地HTML中的canvas以圖片形式存入Word文檔
繼續訪問
jQuery wordExport實現網頁導出word
最近項目上有個需求，需要把網頁的內容導出word中（頁面中包含echarts圖和表格），通過後台實現需要重新寫代碼，修改起來太麻煩，於是找到了jquery的wordExport插件。 下載地址：https://github.com/Jasmine1227/jquery.wordexport.js 下載地址：https://github.com/eligrey/FileSave...
繼續訪問
Echart生成圖片、自定義Echart、jquery-word-export 導出word文檔
近期開發需求當中的導出word文檔技術分享 使用技術： Echart "echarts": "^5.0.2", jquery "jquery": "^3.6.0", jquery.wordexport.js 代碼詳情 file-saver "file-saver": "^2.0.5", 使用 jquery.wordexport.js 導出的時候需要注意一些樣式，只能寫行內樣式，還可以在 jquery.wordexport.js 內 style變數內寫 的位置寫例如： var styles = 'ta
繼續訪問
帶樣式的文本、表格、echarts圖導出到word中整理思路梳理
年前一個需求扔了過來，就是把頁面展示的文本、表格、echats圖、等等等等，按照頁面展示的樣子導出到word中，還要純前端完成。扯皮了很久之後，無奈的開始了各種網路+api的嘗試。 一、首先嘗試jquery+FileSaver+wordexport的方案 參考demo：wordExport 導出頁面word文檔格式 - 簡書 可以導出頁面上的文字和表格，但是樣式必須寫在行內，否則無效。 二、html-docx-js + raw-loader 方案 安裝相關的組件 npm install -...
繼續訪問
html轉word的原理,vue導出html、word原理
vue導出html、word原理日期：2020-06-10來源：程序思維瀏覽：1313次今天給大家說說如何用vue導出html靜態頁面和word的原理。由於導出word時，頁面樣式無法正常使用，因此整體頁面採用table布局，僅在幾個地方添加style樣式，沒有其餘樣式：/*** 當頁面中有canvas時，我的做法是* 在頁面中預先放置一個src為空的img標簽* 點擊導出時，將canvas轉為b...
繼續訪問
【已實現】純前端導出帶echarts的word文檔，內附完整實現代碼
主要利用docxtemplater實現.
繼續訪問
前端導出word（包含圖表）
前端導出word文檔，包含（圖表），先把canvas轉成圖片，再導出，還有點問題，不過功能實現了，不用通過後台，看到的大神可以留言提出改進的方法 代碼如下： canvas轉圖片用的是html2canvas插件 Install：npm install html2canvas use:import html2canvas from 『html2canvas』; vue 組件代碼： Vue組件內的js...
繼續訪問
html5 canvas word,HTML5 Canvas
Canvas 轉為圖片我們可以使用 Canvas2image 庫將 canvas 轉換為圖片。使用方式如下：Canvas2Image.saveAsImage(canvasObj, width, height, type)Canvas2Image.saveAsPNG(canvasObj, width, height)Canvas2Image.saveAsJPEG(canvasObj, width, ...
繼續訪問
echarts圖表截圖保存成word文件的方法
echarts圖表截圖保存成word文件的方法
繼續訪問
wordExport導出word時關於echarts圖表生成圖片的解決方案
一、基本介紹 wordExport是一款基於前端處理生成word的處理方式 在對應頁面引入FileSaver.js和jquery.wordexport.js 使用：需生成word的部分.wordExport(文件名,文件樣式) 二、echarts相關 一般我們頁面存在echarts圖表導出word時通常時將其先生成為一張圖片，再將其導出，在圖表轉變圖片的這個過程中，經常會出現一些問題，經常會出現導出文檔中的echarts圖片生成不完整的情況，要麼直接是一張破圖，要麼是一張未載入完成的圖片，針對這類問題，
繼續訪問
js將html轉為word文檔,js將html導出到word文檔（含echarts圖表）
需求在開發項目途中遇到了一個需求，就是將一個整個HTML界面導出到word文檔，其中包含了echarts圖表，經過一番折騰，終於完成了~~~(雞肋)，過程中用到了幾個插件，總結了一下幾個步驟，希望可以幫到大家。將插件導入項目順序一定不能亂，順序按照圖中順序導入，插件的源碼網上搜一下很多的~~~注冊echarts圖表HTMl代碼寫一個空的div來存echarts圖表js代碼這里是引用的官方的例子，這...
繼續訪問
html畫布顯示PPT,【前端】有沒有辦法讓HTML5 canvas顯示/預覽word/excel/powerpoint 文檔？...
目前想實現類似網路文庫那樣的在線文檔預覽，但是他們使用的一般都是Flash，而HTML5 canvas可以在大多數情況下代替Flash，那麼有沒有辦法讓canvas顯示/預覽Office文檔？如果不用Flash，目前唯一的方法是，用OpenOffice/LibreOffice或者在線服務(比如七牛裡面第三方提供的文檔轉換服務)轉換成PDF，然後用Mozilla的pdf.js來在線預覽。回答其實不一...
繼續訪問
js導出頁面中的canvas(包括但不限於echart渲染)到doc文檔
問題由來 網上好多導出html到pdf的，今天來挑戰下自己，試下能不能html導出到doc文檔，網上有個方法是用wordexport.js這個庫，但是這個庫沒法導出圖片和canvas，那麼只好重新找庫，下面我們來分析！ 問題分析 我們只需要html中的圖片，canvas能導出來即可，其他的簡單，那麼我們多方查證和測試，發現只有圖片能導出到doc，也就是canvas要轉換成img格式，圖片的url還...
繼續訪問
canvas轉word
echarts
前端
寫評論
評論
3. vue導出word模板換行
1、首先拿州哪姿出電腦，並冊絕打開。
2、其次進入電腦，找到word，並打緩螞開。
3、最後點擊文件，上面vue即可導出word模板進行換行。
4. vue實現轉圖片列印
首先安裝兩個插件
npm install --save html2canvas
npm install print-js --save
1，設置列印區域ref
2，引入插件 轉圖片列印需要先腔稿敬安裝html2Canvas和伍慎print-js
3,js
4,單純的列印,與html2canvas不同的是，這里的printCons要設敬猜置為id而不是ref
5. 前端導出word文檔（基於vue）
工作中經常會遇到根據不同數據導出文檔的情況，現在源陸我們就來看一下基於 docxtemplater 來導出word文檔的方法，使用起來非常便捷。
下面簡單介紹一下這幾個插件的功能：
下面列出幾中常見雹拿頃的 docxtemplater 語法
word模板文件中語法：
word模板文件中語法：
word模板文件中語法：
word模板文件中語法：
在這里關於模板文件的路徑 tempDocxPath 我們要著重說一下。
在使用的過程中應該有不少人會遇到這種報錯： Can't find end of central directory : is this a zip file ?
那這到底是什麼原因導致的呢？
獲得模板文件的二進制內容的方法，JSZipUtils.getBinaryContent(path, option) 提供path和option兩個參數。我們來看一下path，前端開發最首先想到的可能是絕對敏宏路徑或者相對路徑，你可能還會用到@這個符號作為根目錄使用，但在這里你顯然不能這么用。
6. 純前端導出word（含echarts）
解決的是導出含有echarts的頁面為word文檔，需要考慮echarts圖表的大小，採用的是設置角度解析器來預設置圖片寬高，也考慮到多圖導出問題，下面是我的解決過程
建立一個word.js，內容如下
不知道模板文件如何導入或導入錯誤，JszipUtils.getBinaryContent(fileDocx, function(err, res) {}）時，不知道這個fileDocx模板文件放在哪裡，然後出現引入路徑錯誤
Error: Can't find end of central directory : is this a zip file?
在使用vue-cli2時，我們需要把模板文件放到static目錄下
在使用vue-cli3時，我們需要把模板文件放在public目錄下
然後當config中的publicPath是'./'時，直接傳入文件名就好，如
JszipUtils.getBinaryContent('template.docx', function(err, res) {}）
當config中的publicPath是 『/』時，則需要../一層層到相應位置，要特別注意省去public目錄，如
JszipUtils.getBinaryContent('../../template.docx', function(err, res) {}）
我的環境是vue-cli3，然後再public目錄下建立word文件夾存放模板文件weektmp.docx
7. vue怎麼導出word文檔
使用vue.js構造modal組件的方法是使用 v-model 指令：
v-model 指令在表單控制項元素上創建雙向數據綁定。根據控制項類型它自動選取正確的方法更新元素。
比如，多個勾選框，綁定到同一個數組：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
8. vue2中導出帶有圖片的excel表格
1、安裝插件碧派
2、新建一個excel.js文件，寫出你需要導緩液出的數據
3、在需要導出的vue文悔哪賀件中引入
4、導出