示例說明

在Vue中導(dǎo)出Word文檔，可以使用第三方庫file-saver和html-docx-js。首先需要安裝這兩個庫：

npm install file-saver html-docx-js --save

然后在Vue組件中使用這兩個庫來導(dǎo)出Word文檔：

示例效果圖

導(dǎo)出的文件效果截圖

示例源代碼

/*
* @Author: 大劍師蘭特（xiaozhuanlan），還是大劍師蘭特（CSDN）
* @此源代碼版權(quán)歸大劍師蘭特所有，可供學(xué)習(xí)或商業(yè)項目中借鑒，未經(jīng)授權(quán)，不得重復(fù)地發(fā)表到博客、論壇，問答，git等公共空間或網(wǎng)站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-16
*/

<template>
	<div class="djs-box">
		<div class="topBox">
			<h3>vue導(dǎo)出word文檔</h3>
			<div>大劍師蘭特, 還是大劍師蘭特，gis-dajianshi</div>
			<h4>
				<el-button type="primary" size="mini" @click="exportToWord()"> 導(dǎo)出word文檔</el-button>
			</h4>
		</div>
		
		<div class="dajianshi" id="dajianshi">
			<h3> 這是我要導(dǎo)出的文件標題</h3>
			<p>This is a very small library that is capable of converting HTML documents to DOCX format that is used by
				Microsoft Word 2007 and onward. It manages to perform the conversion in the browser by using a feature
				called 'altchunks'. In a nutshell, it allows embedding content in a different markup language. We are
				using MHT document to ship the embedded content to Word as it allows to handle images. After Word opens
				such file, it converts the external content to Word Processing ML (this is how the markup language of
				DOCX files is called) and replaces the reference.</p>
			<p>
				Altchunks were not supported by Microsoft Word for Mac 2008 and are not supported by LibreOffice and
				Google Docs.</p>
			
		</div>
	</div>
</template>

<script>
	import FileSaver from 'file-saver';
	import htmlDocx from 'html-docx-js/dist/html-docx';
	export default {
		data() {
			return {
				message: 'hello world',
				price: 1234.56,
				date: '2022-01-01'
			}

		},
		methods: {
			exportToWord() {
				// 獲取要導(dǎo)出的HTML內(nèi)容
				const content = document.getElementById('dajianshi').innerHTML;
				// 將HTML內(nèi)容轉(zhuǎn)換為Word文檔
				const converted = htmlDocx.asBlob(content);
				// 使用FileSaver保存Word文檔
				FileSaver.saveAs(converted, 'example.docx');
			},
		},

	}
</script>
<style scoped>
	.djs-box {
		width: 1000px;
		height: 650px;
		margin: 50px auto;
		border: 1px solid deepskyblue;
	}

	.topBox {
		margin: 0 auto 0px;
		padding: 10px 0 20px;
		background: deepskyblue;
		color: #fff;
	}

	.dajianshi {
		width: 93%;
		height: 400px;
		margin: 5px auto 0;
		border: 1px solid #369;
		background-color: cde;
		padding: 20px;
	}

	p {
		font-size: 16px;
		text-align: left;
	}
</style>

參數(shù)說明：

要生成 DOCX，只需將 HTML 文檔（作為字符串）傳遞給 asBlob 方法以接收包含輸出文件的 Blob（或緩沖區(qū)）。

var converted = htmlDocx.asBlob(content);
saveAs(converted, ‘test.docx’);

asBlob 可以采用其他選項來控制文檔的頁面設(shè)置：

orientation: landscape or portrait (default)
margins: map of margin sizes (expressed in twentieths of point, see WordprocessingML documentation for details):
top: number (default: 1440, i.e. 2.54 cm)
right: number (default: 1440)
bottom: number (default: 1440)
left: number (default: 1440)
header: number (default: 720)
footer: number (default: 720)
gutter: number (default: 0)

重要提示：

please pass a complete, valid HTML (including DOCTYPE, html and body tags). This may be less convenient, but gives you possibility of including CSS rules in style tags.

html-docx-js is distributed as ‘standalone’ Browserify module (UMD). You can require it as html-docx. If no module loader is available, it will register itself as window.htmlDocx. See test/sample.html for details.

API 參考網(wǎng)址

https://www.npmjs.com/package/html-docx-js文章來源地址http://www.zghlxwxcb.cn/news/detail-826830.html

到了這里，關(guān)于vue導(dǎo)出word文檔（圖文示例）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！