Vue html转word

最新推荐文章于 2024-06-05 17:16:34 发布
最新推荐文章于 2024-06-05 17:16:34 发布
阅读量2.1k 收藏 9
点赞数 1
文章标签： vue.js html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52177667/article/details/121113899
版权


一、使用步骤


1.引入依赖包

代码如下（示例）：

npm install file-saver --save


2.在下载页面导入

代码如下（示例）：

import { saveAs } from 'file-saver'

3.在页面中可以定义一个html模板，也可以在全局写

getModelHtml(mhtml) {
      return `<!DOCTYPE html>
                <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"
                  xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
                  xmlns="http://www.w3.org/TR/REC-html40">
                <head>
                  <!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:TrackMoves>false</w:TrackMoves><w:TrackFormatting/><w:ValidateAgainstSchemas/><w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid><w:IgnoreMixedContent>false</w:IgnoreMixedContent><w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText><w:DoNotPromoteQF/><w:LidThemeOther>EN-US</w:LidThemeOther><w:LidThemeAsian>ZH-CN</w:LidThemeAsian><w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript><w:Compatibility><w:BreakWrappedTables/><w:SnapToGridInCell/><w:WrapTextWithPunct/><w:UseAsianBreakRules/><w:DontGrowAutofit/><w:SplitPgBreakAndParaMark/><w:DontVertAlignCellWithSp/><w:DontBreakConstrainedForcedTables/><w:DontVertAlignInTxbx/><w:Word11KerningPairs/><w:CachedColBalance/><w:UseFELayout/></w:Compatibility><w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel><m:mathPr><m:mathFont m:val="Cambria Math"/><m:brkBin m:val="before"/><m:brkBinSub m:val="--"/><m:smallFrac m:val="off"/><m:dispDef/><m:lMargin m:val="0"/> <m:rMargin m:val="0"/><m:defJc m:val="centerGroup"/><m:wrapIndent m:val="1440"/><m:intLim m:val="subSup"/><m:naryLim m:val="undOvr"/></m:mathPr></w:WordDocument></xml><![endif]-->

                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width,initial-scale=1.0">
                    <title>${this.test}</title>
                    <style>${wordCss}</style>
                </head>
                <body>
                    <div style="display: flex;justify-content: center;">
                      ${mhtml}
                    </div>
                </body>
                </html>`
    },

注释：css可以重新定义一个后缀为.js的文件,并在使用以上模板的文件中引入

这边是css的书写方式

export const wordCss = `
.title {
  height: 64px;
  width: 800px;
  text-align: center;
  line-height: 64px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: rgba(0, 11, 46, 0.85);
}
.all-box {
  position: relative;
}
.all-topic {
  padding: 24px;
}
`

4.最后就是在点击下载事假中

const node = document.querySelector('.exportBox').innerHTML
const html = this.getModelHtml(node)
const blob = new Blob([html], { type: 'application/msword;charset=utf-8' })
saveAs(blob, this.test + '.doc')

注释：按着以上模板代码写就行，只是获取的don元素的话，每个人的定义名称不一样（做修改即可）


总结

下载下来的话，是正常的，但是要是页面上存在图片的话，（我这边是富文本框，是后端给我返回的，然后我是用公司同事分装的标签渲染的 v-html），然就后端给我的图片路劲是../(相对路劲)，所以下载下来图片会丢失，要把图片改成绝对路劲。因为我的图片是后端返回的，所以我给返回数据的所有图片路劲进行了替换
 

 const host = window.location.protocol + '//' + window.location.host
const data = JSON.stringify(infoData).replace(RegExp('../upload-file', 'g'), 
             `${host}/upload-file`)
this.infoData = JSON.parse(data)

Shelly-L
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端下载利器FileSaver
m0_67393295的博客
03-02 9329
前言：想必很多小伙伴都用过 a标签拿来下载的吧，里面很多坑相信也知道了，用起来真的是超级简单。使用方法如下： href: 文件的绝对/相对地址 download: 文件名（可省略，省略后浏览器自动识别源文件名） <a href='xxx.jpg' download='file.jpg'>下载jpg图片</a> 那么既然这么简单，那肯定是存在问题的。 上面这张图片是官方提供的兼容性，目前只有FireFox和Chrome支持download属性。对于图片文件和文本文件这种可以被浏
vue导出文件，用FileSaverJs就够了
weixin_47146612的博客
02-23 4709
FileSaver.js 是在客户端保存文件的解决方案，非常适合 在客户端上生成文件的 Web 应用。它是 HTML5 版本的 saveAs() FileSaver 实现，支持大多数主流的浏览器，其兼容性如下图所示：**
HTML页面嵌入WORD编辑文档
03-28
NULL 博文链接：https://linleizi.iteye.com/blog/1199078
使用file-saver导出文件
热门推荐
guizi0809的博客
08-05 3万+
一、安装 npm install file-saver --save # 如使用TS开发，可安装file-saver的TypeScript类型定义 npm install @types/file-saver --save-dev 二、使用 导出 saveAs import { saveAs } from 'file-saver' 保存文本 const blob = new Blob(['Hello, world!']) saveAs(blob, 'hello world.txt')
vue中html导出成word
最新发布
morningttt的博客
06-05 354
参考链接：https://blog.csdn.net/weixin_47494533/article/details/137018678。vue 中将 html 中内容转换为 word 文档导出，无需模板，可以导出 echarts 图表。先将html中内容获取，之后将页面上的元素转成图片,然后把图片放到word文件中进行导出。使用 html-docx-js、file-saver。2、创建 exportToWord.js，添加导出方法。
VUE前端导出文件之file-saver插件
xyphf的博客
12-22 4299
VUE前端导出文件之file-saver插件
vue导出html、word和pdf的实现代码
10-18
主要介绍了vue导出html、word和pdf的实现方法，文中完成了三种文件的导出但是还有很多种方法，小编就不给大家一一列举了,需要的朋友可以参考下
vue导出word功能
02-20
在Vue.js应用中实现导出Word功能，通常是为了让用户能够方便地下载并保存数据报告、图表或表格等信息。Echarts是一个强大的JavaScript可视化库，常用于创建各种类型的图表，如折线图、柱状图、饼图等。将Echarts图表...
vue仿word表单录入demo
03-28
【Vue.js仿Word表单录入Demo详解】 Vue.js是一款轻量级、高性能的前端JavaScript框架，广泛用于构建用户界面。本Demo旨在实现一个类似于Word的表单录入功能，让用户能够在一个网页环境中填写、编辑和保存数据，从而...
word .docx文件格式转vue.html文件工具
03-25
本篇文章将深入探讨“word .docx文件格式转vue.html文件工具”的相关知识点，包括Word .docx文件格式、Vue.js、HTML以及软件/插件在文件转换中的应用。 首先，Word .docx是一种流行的文档格式，由微软公司开发，...
java使用POI实现html和word相互转换
08-26
Java 使用 POI 实现 HTML 和 Word 相互转换 在本文中，我们将详细介绍如何使用 Java 和 Apache POI 库实现 HTML 和 Word 之间的相互转换。POI 库是一个流行的 Java 库，提供了许多实用的功能来处理 Microsoft ...
【vue 导出功能】file-saver插件
马云
02-24 5290
文章目录vue 导出功能（file-saver插件）1、导出插件的安装2、导出功能函数封装3、工具函数4、拦截器 vue 导出功能（file-saver插件） 1、导出插件的安装 安装"file-saver": "2.0.5"插件: npm i --save file-saver 2、导出功能函数封装 import axios from 'axios' import { saveAs } from 'file-saver' axios.defaults.headers['Content-Type'] =
file-saver导出文件流
TheSpiritIsHeart的博客
11-27 1050
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
file-saver blob前端导出excel文件
weixin_47541876的博客
07-14 1599
file-saver blob导出excel文件 前端导出文件
FileSaver.js的简单使用
weixin_41897680的博客
02-25 1万+
FileSaver.js 的简单使用
Vue前端导出标准格式word（承接上一篇Vue纯前端导出word）
qq_41154522的博客
07-14 1077
设置html为<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"&gt.
file-saver 的使用
每天都要努力学习哦~~
12-10 1235
FileSaver.js 是在客户端保存文件的解决方案，非常适合在客户端生成文件的 Web 应用程序。
vue中实现将html导出为word/excel
Stitch_xiao的博客
06-22 5273
需求：将页面整成理想样式，将想要的那一部分页面导出成word,不用写模板，按照当前页面样式导出即可。第四步：获取dom节点myContainer并导出（我写的行内样式）第二步：给到处那部分的容器起个id名。第三步：在需要的地方引入依赖。第一步：安装需要的依赖。
vue把html导出为word
m0_47408822的博客
11-02 3401
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 word转换为html并替换
05-27
可以使用 Vue.js 中的 `v-html` 指令将字符串转换为 HTML 并插入到 DOM 中。具体实现步骤如下： 1. 在 Vue 组件中定义一个方法，用于将 Word 文档转换为 HTML 字符串，例如： ``` methods: { wordToHtml(word) { // 将 Word 转换为 HTML 字符串的代码 // ... return html; } } ``` 2. 在模板中使用 `v-html` 指令和上面定义的方法将 Word 转换为 HTML 并替换： ``` <div v-html="wordToHtml(word)"></div> ``` 其中 `word` 是需要转换的 Word 文档字符串。这样就能将 Word 转换为 HTML 并插入到页面中了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值