vue将html标签内容导出word

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").innerHTMLlet 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');}

vue将html标签内容导出word相关推荐

Java poi导出带html标签内容的word文档
public static void exportWord(HttpServletResponse response, String content, String fileName) throws ...
html内容导出word和pdf（带图片）
富文本内容导出为 word 安装依赖 npm install file-saver --save npm install html-docx-js --save 引入依赖 import htmlDoc ...
Vue下使用docxtemplater-POI模式导出word
快捷导航需要用到的组件核心代码遇到的问题相关链接需要用到的组件 import docxtemplater from 'docxtemplater' import PizZip from 'p ...
【操作word】Java + POI导出富文本的内容到word文档
这周工作中,遇到一个需求是需要将数据库中富文本内容导出到word文档里面,于是就采用POI技术实现了一下导出word文档的功能.(word文档是识别html内容的,所以富文本内容也自然能够识别.) 一 ...
java response 输出word_如何使用java代码导出word
前言: 导出word的需求其实在日常工作中用到的地方还不少,于是想写一篇文章好好记录一下,在导出之前,需要了解一下关于浏览器如何处理servlet的后台数据.具体可以了解一下http通信下载行为在se ...
java打出的代码如何保存_如何使用java代码导出word
前言: 导出word的需求其实在日常工作中用到的地方还不少,于是想写一篇文章好好记录一下,在导出之前,需要了解一下关于浏览器如何处理servlet的后台数据.具体可以了解一下http通信下载行为在se ...
如何使用java代码导出word
前言: 导出word的需求其实在日常工作中用到的地方还不少,于是想写一篇文章好好记录一下,在导出之前,需要了解一下关于浏览器如何处理servlet的后台数据.具体可以了解一下http通信下载行为在se ...
js导出word文档可以兼容IE8+浏览器适配其他浏览器
js导出word文档,兼容IE8浏览器其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js exc ...
vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍要实现前端纯js导出word文档,我们需 ...

vue将html标签内容导出word

1.安装依赖

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

3.js代码

vue将html标签内容导出word相关推荐

最新文章

热门文章