前端导出为Word文档示例

oh-caiii

已于 2024-01-03 13:50:09 修改

阅读量1.1k

点赞数 4

分类专栏：前端Vue 文章标签：前端 word

于 2023-10-03 14:46:29 首次发布

本文链接：https://blog.csdn.net/m0_67528197/article/details/133518819

版权

前端Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

使用JavaScript创建一个虚拟的Word文档，然后提供一个下载链接，让用户点击下载。
exportToWord1()和exportToWord2()分别为html数据和JavaScript中数据。

<!DOCTYPE html>
<html>
<head>
    <title>导出为Word文档</title>
</head>
<body>
    <div id="dataToExport">
        <h1>导出为Word文档示例</h1>
        <p>这是要导出的数据。</p>
    </div>
	
    <button onclick="exportToWord1()">生成Word1文档</button>
       <!-- <button id="exportButton">生成Word1文档</button> -->
    <button onclick="exportToWord2()">生成Word2文档</button>
	</body>
    <script>
        /* // 点击按钮时触发导出操作
        document.getElementById("exportButton").addEventListener("click", function () {exportToWord1();}); */
		
		//数据在html中
        function exportToWord1() {
            // 获取要导出的数据的HTML内容
            var dataToExport = document.getElementById("dataToExport").innerHTML;

            // 创建一个Blob对象
            var blob = new Blob(["<!DOCTYPE html><html><head><meta charset='UTF-8'></head><body>" + dataToExport + "</body></html>"], { type: "application/msword" });

            // 生成Blob URL
            var blobUrl = URL.createObjectURL(blob);

            // 创建一个下载链接
            var link = document.createElement("a");
            link.href = blobUrl;
            link.download = "word1.docx"; // 设置下载文件的名称

            // 添加下载链接到页面上
            document.body.appendChild(link);

            // 触发点击事件以开始下载
            link.click();

            // 移除下载链接
            document.body.removeChild(link);

            // 释放Blob URL
            URL.revokeObjectURL(blobUrl);
        }
			
		//数据在JavaScript中，data存储
         function exportToWord2() {
            // 模拟要导出的数据
            var data = "这是要导出的数据。\n第一行内容\n第二行内容";

            // 创建一个Blob对象
            var blob = new Blob(['\ufeff', data], { type: 'application/msword' });

            // 生成Blob URL
            var blobUrl = URL.createObjectURL(blob);

            // 创建一个下载链接
            var link = document.createElement("a");
            link.href = blobUrl;
            link.download = "Word2.docx"; // 设置下载文件的名称

            // 添加下载链接到页面上
            document.body.appendChild(link);

            // 触发点击事件以开始下载
            link.click();

            // 移除下载链接
            document.body.removeChild(link);

            // 释放Blob URL
            URL.revokeObjectURL(blobUrl);
        }
    </script>

</html>

oh-caiii

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端导出为Word文档示例

exportToWord1()和exportToWord2()分别为html数据和JavaScript中数据。使用JavaScript创建一个虚拟的Word文档，然后提供一个下载链接，让用户点击下载。
复制链接

扫一扫