vue将html标签内容导出word

最新推荐文章于 2024-03-08 15:10:17 发布
最新推荐文章于 2024-03-08 15:10:17 发布
阅读量2.3k 收藏 3
点赞数 2
文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66523895/article/details/126596789
版权

1.安装依赖

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

file-saver是用来保存文件的，也是必须安装的。 

 2.表格或其他html标签（也可用ref属性）

<table id="id"> ... </table>

 3.js代码

// 导入依赖
import FileSaver from 'file-saver'
import htmlDocx from "html-docx-js/dist/html-docx"

//模板word导出
    exportWordTpl() {
        let contentHtml = document.getElementById("id").innerHTML
      	let cssHTML = `
		    table {
		    width: 100%;
		    table-layout: fixed;
		    margin-top:10px;
		    border: 1px solid #ddd;
		    border-collapse: collapse;
		    }
		    .export-tb .thead td {
		    font-weight: bold;
		    }
		    td {
		    border: 1px solid #ddd;
		    color: #333;
		    text-align: left;
		    padding: 6px 10px;
		    }`
    	 let content = `
    	 	<!DOCTYPE html><html>
            	<head>
	                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	                <style>
	                    ${cssHTML}
	                </style>
	            </head>
	            <body>
	                <table>
                  		${contentHtml}
                	</table>
	            </body>
            </html>`;
      let converted = htmlDocx.asBlob(content);
      FileSaver.saveAs(converted, '文件名.docx');
    }

 

穿条秋裤吧
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue导出html、word和pdf的实现代码
10-18
主要介绍了vue导出html、word和pdf的实现方法，文中完成了三种文件的导出但是还有很多种方法，小编就不给大家一一列举了,需要的朋友可以参考下
vue中实现将html导出为word/excel
Stitch_xiao的博客
06-22 4393
需求：将页面整成理想样式，将想要的那一部分页面导出成word,不用写模板，按照当前页面样式导出即可。第四步：获取dom节点myContainer并导出（我写的行内样式）第二步：给到处那部分的容器起个id名。第三步：在需要的地方引入依赖。第一步：安装需要的依赖。
vue前端实现导出页面为word(两种方法)
最新发布
Z18834071903的博客
03-08 1053
vue前端实现导出页面为word(两种方法)
vue中html导出到word
每天都记录一点点！
04-19 3541
最新项目要实现个需求，数据导出到word格式的文档，所以就上github上找点思路，一看就发现了一个https://github.com/evidenceprime/html-docx-js，但是现在貌似进不去了，应该是需要翻墙了； 那就说说怎么使用html-docx-js来导出word吧！ 第一步：安装必备包： npm install html-docx-js -S npm install file-saver -S file-saver是用来保存文件的，也是必须安装的。 第二步：使用 现在
html-docx-js-typescript:将HTML文档转换为docx格式
05-02
html-docx-js-typescript 用Typescript重写 。 将HTML文档转换为docx格式。 正在安装 npm install html-docx-js-typescript --save-dev 用法 支持node.js和浏览器环境，包括vue / react / angular。 Vue.js用法演示： import { asBlob } from 'html-docx-js-typescript' // if you want to save the docx file, you need import 'file-saver' import { saveAs } from 'file-saver' const htmlString = `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
vue把html导出为word
m0_47408822的博客
11-02 3367
1 首先安装 file-saver和html-docx-js npm install file-saver --save npm install html-docx-js --save 2.引入 import { saveAs } from 'file-saver'; import htmlDocx from 'html-docx-js/dist/html-docx'; 3.导出html为word let arr = document.querySelector('#question_doc') /
vue项目中html转word批量导出
辽辽无期的博客
06-29 349
批量导出和打印学生的考试试卷。
前端html-docx实现html转word，预览并导出文件
在车上在路上的博客
03-13 5647
综上，如何模板内容格式简单，要求低，纯前端来实现这种预览导出还是可行的，要求高的话还是后端去做吧。
vue项目html导出到word
bajiutao的博客
05-31 481
vue项目html导出到word
js将HTML文本导出生成word文档
11-27
js将HTML导出生成word文档，方式简单，不需要修改浏览器配置，引入两个js就可以解决该问题，亲测有效
vue导出word功能
02-20
echarts、table、文本导入到word文档中下载
vue 导出word插件
12-21
在文件的开头我有写需要下载的包名,使用之前下载包名,该插件包含了list-loop ,condition语法等,引入既可以使用
vue实现word，pdf文件的导出功能
10-18
给大家介绍了vue实现word或pdf文档导出的功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
「Vue To Words」 - 教你在Vue项目中导出Word文档（包含表格合并，图片修改大小）
Xhfc_pf1996的博客
04-26 6355
起初使用的常规的方法：docxtemplater配合file-saver和jszip，并且使用wps进行定义word模板，同时在word模板使用{data}占位符进行渲染（具体不细说），这种方式打出的word不符合要求，具体是的可以参考官网的示例，这种导出的方式：是没有样式的的，如何需要样式，可以自己进行定义，同时使用这种方式有甚多的限制，许多的css样式不能够进行生效，比如一些：定位，弹性盒，浮动，等等，基本只能使用一下文本样式，在需要使用的vue页面中中引入js文件和jqurey。
vue导出word文档方法？
zybijiso666的博客
08-07 216
5、找到\node_modules\html-docx-js\dist\html-docx.js文件 更改一下内容。
vue若依导出word文件,简单的实现
子豪的博客
08-24 2132
若依导出word
富文本编辑器(html格式)导出为word（vue实现）
热门推荐
qq_44464101的博客
03-21 1万+
Vue 富文本编辑器 html word
vue 3.0(通用) 表格（HTML）导出成Excel文件或HTML转word文档
苦夏木禾
05-17 5159
HTML导出excel、word
vue 标签内容导出word
03-31
要将Vue标签内容导出为Word文档，你需要使用JavaScript库来实现。以下是使用jsPDF和html2canvas库的示例代码： 1. 首先，你需要在Vue项目中安装jsPDF和html2canvas库： ``` npm install jspdf html2canvas ``` 2. 在Vue组件中引入这两个库： ```javascript import jsPDF from 'jspdf'; import html2canvas from 'html2canvas'; ``` 3. 在Vue组件中添加一个方法，该方法将调用html2canvas将Vue标签转换为图像，然后再使用jsPDF将图像添加到PDF文档中： ```javascript export default { methods: { exportToWord() { // 获取要导出的Vue标签 const vueTag = this.$refs.vueTag; // 将Vue标签转换为Canvas图像 html2canvas(vueTag).then(canvas => { // 创建PDF文档 const pdf = new jsPDF(); // 将Canvas图像添加到PDF文档中 pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), 0); // 下载PDF文档 pdf.save('exportedWordDocument.pdf'); }); } } }; ``` 4. 在Vue组件中添加一个按钮或其他元素，以便用户单击该元素时触发导出方法： ```html <template> <div> <div ref="vueTag"> <!-- 要导出为Word文档的Vue标签内容 --> </div> <button @click="exportToWord">导出为Word文档</button> </div> </template> ``` 请注意，这只是一个简单的示例代码，你可能需要对其进行调整以适应你的项目需求。另外，由于jsPDF和html2canvas库的某些限制，你可能无法完全复制Vue标签的样式和布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值