当前位置: 首页 > news >正文

vue导出word文档(图文示例)

在这里插入图片描述

第076个

查看专栏目录: VUE


本文章目录

    • 示例说明
    • 示例效果图
    • 导出的文件效果截图
    • 示例源代码
    • 参数说明:
    • 重要提示:
    • API 参考网址

示例说明

在Vue中导出Word文档,可以使用第三方库file-saver和html-docx-js。首先需要安装这两个库:

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

然后在Vue组件中使用这两个库来导出Word文档:

示例效果图

在这里插入图片描述

导出的文件效果截图

在这里插入图片描述

示例源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @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导出word文档</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="primary" size="mini" @click="exportToWord()"> 导出word文档</el-button></h4></div><div class="dajianshi" id="dajianshi"><h3> 这是我要导出的文件标题</h3><p>This is a very small library that is capable of converting HTML documents to DOCX format that is used byMicrosoft Word 2007 and onward. It manages to perform the conversion in the browser by using a featurecalled 'altchunks'. In a nutshell, it allows embedding content in a different markup language. We areusing MHT document to ship the embedded content to Word as it allows to handle images. After Word openssuch file, it converts the external content to Word Processing ML (this is how the markup language ofDOCX 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 andGoogle 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() {// 获取要导出的HTML内容const content = document.getElementById('dajianshi').innerHTML;// 将HTML内容转换为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>

参数说明:

要生成 DOCX,只需将 HTML 文档(作为字符串)传递给 asBlob 方法以接收包含输出文件的 Blob(或缓冲区)。

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

asBlob 可以采用其他选项来控制文档的页面设置

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 参考网址

https://www.npmjs.com/package/html-docx-js

相关文章:

vue导出word文档(图文示例)

第076个 查看专栏目录: VUE 本文章目录 示例说明示例效果图导出的文件效果截图示例源代码参数说明&#xff1a;重要提示&#xff1a;API 参考网址 示例说明 在Vue中导出Word文档&#xff0c;可以使用第三方库file-saver和html-docx-js。首先需要安装这两个库&#xff1a; npm …...

【C Primer Plus第六版 学习笔记】 第十七章 高级数据表示

有基础&#xff0c;进阶用&#xff0c;个人查漏补缺 链表&#xff1a;假设要编写一个程序&#xff0c;让用户输入一年内看过的所有电影&#xff0c;要储存每部影片的片名和评级。 #include <stdio.h> #include <stdlib.h> /* 提供malloc()的原型 */ #include <s…...

租用一个服务器需要多少钱?2024阿里云新版报价

2024年最新阿里云服务器租用费用优惠价格表&#xff0c;轻量2核2G3M带宽轻量服务器一年61元&#xff0c;折合5元1个月&#xff0c;新老用户同享99元一年服务器&#xff0c;2核4G5M服务器ECS优惠价199元一年&#xff0c;2核4G4M轻量服务器165元一年&#xff0c;2核4G服务器30元3…...

python-产品篇-游戏-成语填填乐

文章目录 准备代码效果 准备 无需其他文件&#xff0c;复制即用 代码 import random list["春暖花开","十字路口","千军万马","白手起家","张灯结彩","风和日丽","万里长城","人来人往",&…...

数据库数据加密的 4 种常见思路的对比

应用层加解密方案数据库前置处理方案磁盘存取环节&#xff1a;透明数据加密DB 后置处理 最近由于工作需要&#xff0c;我对欧洲的通用数据保护条例做了调研和学习&#xff0c;其中有非常重要的一点&#xff0c;也是常识性的一条&#xff0c;就是需要对用户的个人隐私数据做好加…...

HCIA-HarmonyOS设备开发认证V2.0-IOT硬件子系统-PWM

目录 一、PWM 概述二、PWM 模块相关API三、接口调用实例四、PWM HDF驱动开发4.1、开发步骤(待续...) 坚持就有收获 一、PWM 概述 PWM&#xff08;Pulse Width Modulation&#xff09;又叫脉冲宽度调制&#xff0c;它是通过对一系列脉冲的宽度进行调制&#xff0c;等效出所需要…...

001kafka源码项目gradle报错UnsupportedClassVersionError-kafka-报错-大数据学习

1 报错提示 java.lang.UnsupportedClassVersionError: org/eclipse/jgit/lib/AnyObjectId has been compiled by a more recent version of the Java Runtime (class file version 55.0), this version of the Java Runtime only recognizes class file versions up to 52.0 如…...

单片机学习笔记---直流电机驱动(PWM)

直流电机介绍 直流电机是一种将电能转换为机械能的装置。一般的直流电机有两个电极&#xff0c;当电极正接时&#xff0c;电机正转&#xff0c;当电极反接时&#xff0c;电机反转 直流电机主要由永磁体&#xff08;定子&#xff09;、线圈&#xff08;转子&#xff09;和换向器…...

Scrum敏捷培训机构推荐

敏捷培训机构中&#xff0c;Scrum中文网&#xff08;www.scrum.cn&#xff09;是一个值得考虑的选择。 Scrum中文网(Scrum.CN)是全球第一个Scrum中文网站&#xff0c;是中国最早的Scrum和敏捷的布道者、教育及推广机构&#xff0c;也是国际Scrum联盟&#xff08;Scrum Allianc…...

《Go 简易速速上手小册》第5章:并发编程(2024 最新版)

文章目录 5.1 Goroutines 的基础 - Go 语言中的轻盈舞者5.1.1 基础知识讲解5.1.2 重点案例&#xff1a;并发下载器功能描述实现代码扩展功能 5.1.3 拓展案例 1&#xff1a;网站健康检查功能描述实现代码扩展功能 5.1.4 拓展案例 2&#xff1a;并发日志处理器拓展案例 2&#xf…...

python - 模块

rootlearning ~]# cat gcdfunction.py #写一个模块&#xff0c;并调用此模块 def gcd(n1,n2): #之前用过的求最大公约数的代码gcd 1k 2while k< n1 and k<n2:if n1%k 0 and n2 % k 0:gcd kk k 1return gcd [rootlearning ~]# cat module.py #完整代码 from gc…...

【Web】CTFSHOW java刷题记录(全)

目录 web279 web280 web281 web282 web283 web284 web285 web286 web287 web288 ​web289 web290 web291 web292 web293 web294 web295 web296 web297 web298 web299 web300 web279 题目提示 url里告诉我们是S2-001 直接进行一个exp的搜 S2-001漏洞分析…...

全球付汇业务的流程

全球付汇业务&#xff0c;主要是针对的进口类业务&#xff0c;并且是一般贸易进口的业务。 主要流程如下&#xff1a; 1.境内客户通过大额系统将人民币转入支付公司的备付金账户&#xff08;一般此客户为企业客户&#xff09;&#xff0c;转账需要通过大额系统&#xff1b; 2.至…...

ubuntu22.04@laptop OpenCV Get Started: 012_mouse_and_trackbar

ubuntu22.04laptop OpenCV Get Started: 012_mouse_and_trackbar 1. 源由2. mouse/trackbar应用Demo2.1 C应用Demo2.2 Python应用Demo 3. 鼠标位置跟踪注释3.1 注册回调函数3.2 回调操作3.3 效果 4. 使用轨迹栏调整图像大小4.1 初始化轨迹栏&注册回调函数4.2 回调操作4.3 效…...

信息安全性测试

1 信息安全性测试 信息安全性测试是确保产品或系统能够有效地保护信息和数据&#xff0c;使得用户、其他产品或系统的访问权限与其授权类型和级别相一致的一系列检查过程。信息安全性测试也应该是一个持续的过程&#xff0c;确保信息系统能够抵御恶意攻击&#xff0c;并保护数…...

[HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

希望你开心&#xff0c;希望你健康&#xff0c;希望你幸福&#xff0c;希望你点赞&#xff01; 最后的最后&#xff0c;关注喵&#xff0c;关注喵&#xff0c;关注喵&#xff0c;佬佬会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的…...

【Java】文件操作与IO

文件操作与IO Java中操作文件针对文件系统的操作File类概述字段构造方法方法及示例 文件内容的读写 —— 数据流Java提供的 “流” API文件流读写文件内容InputStream 示例读文件示例1&#xff1a;将文件完全读完的两种方式示例二&#xff1a;读取汉字 写文件谈谈 OutputStream…...

开关电源电路主要元器件基础知识详解

在学习电子电路过程中&#xff0c;电源我们无法绕开的一个重要部分&#xff0c;很多时候&#xff0c;故障就出现在电源部分&#xff0c;特别是开关电源。开关电源电路主要是由熔断器、热敏电阻器、互感滤波器、桥式整流电路、滤波电容器、开关振荡集成电路、开关变压器、光耦合…...

- 项目落地 - 《选择项目工具的方法论》

本文属于专栏《构建工业级QPS百万级服务》 提纲&#xff1a; 选择大概率能完成业务目标的工具选择最适合的工具制作最适合的工具 本文所说的项目工具&#xff0c;泛指业务软件开发&#xff0c;所依赖的第三方提供的成熟的资源。包括但不限于开发语言、编辑工具、编译工具、三方…...

美国突然致敬中本聪

作者&#xff1a;秦晋 有点看不懂美国的神操作。 2月16日&#xff0c;据《Bitcoin Magazine》报道&#xff0c;比特币的竞争对手、美国参议员伊丽莎白-沃伦对比特币的立场突然180度大转弯。由反对立场转为支持立场。让很多行业媒体出乎意料&#xff0c;甚至惊掉下巴。 报道称&a…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...