Vue html转word

最新推荐文章于 2024-06-19 14:40:02 发布
最新推荐文章于 2024-06-19 14:40:02 发布
阅读量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
    评论
HTML页面嵌入WORD编辑文档
03-28
NULL 博文链接：https://linleizi.iteye.com/blog/1199078
VUE动态生成word的实现
10-15
VUE动态生成Word文档的实现是一个涉及前端技术与文档处理技术的复杂过程，适用于Web开发领域中对文档生成功能的需求。通过使用Vue.js框架，开发者可以利用其响应式和组件化的特点，轻松构建出动态的用户界面。结合...
Vue前端导出标准格式word（承接上一篇Vue纯前端导出word）
qq_41154522的博客
07-14 1095
设置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.
vue 导出 HTML 结构为 Word 文档（.docx）-支持表格、css样式、图片
最新发布
hantanxin的专栏
06-19 439
本文将介绍如何使用 html-docx-js 和 file-saver 这两个 JavaScript 库，实现将 HTML 结构导出为 Word 文档的功能。通过使用 html-docx-js 和 file-saver，我们能够在浏览器中轻松地将 HTML 结构导出为 Word 文档。由于我是用docxtemplater生成的，所以不太需要考虑样式，这个方法导出的还是很好的，我的word转html是用后台插件做的，html转word用这个方法挺好的。你可以通过 npm 安装，也可以直接使用 CDN 引入。
vue中html导出成word
morningttt的博客
06-05 452
参考链接：https://blog.csdn.net/weixin_47494533/article/details/137018678。vue 中将 html 中内容转换为 word 文档导出，无需模板，可以导出 echarts 图表。先将html中内容获取，之后将页面上的元素转成图片,然后把图片放到word文件中进行导出。使用 html-docx-js、file-saver。2、创建 exportToWord.js，添加导出方法。
Angular10 + file-saver前端实现html导出word（包含图片）
gaiery的博客
01-14 2007
场景描述： 在一个即将迎来美好周末的Friday，领导找到我，问我是不是做过html导出word文档的功能，我很诚恳地说做过图片。 项目需求： 项目当中某一个详情页，页面中包含基本内容以及图片，且图片是外部链接。点击导出按钮，实现导出页面内容至word文档实现直接下载。 实现思路： Q1：我们可以使用什么实现word导出？ A1：Blob对象和FilerSaver 解析：Blob 对象表示一个不可变、原始数据的类文件对象。Blob对象可以看作是存放二进制数据的容器，此外还可以通过blob设置二进制数据的MI
vue导出html、word和pdf的实现代码
10-18
本文介绍了在Vue.js框架下，如何实现将HTML页面、Word文档和PDF文件导出的功能。以下是从标题、描述、标签和部分内容中提取的详细知识点： ### Vue.js导出HTML文件 Vue.js提供了多种方法将页面内容导出为HTML文件...
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是一种流行的文档格式，由微软公司开发，...
vue html转pdf
02-28
vue框架中html转pdf代码，很实用，适合项目常用作为工具类和平时开发调试用。
java使用POI实现html和word相互转换
08-26
Java 使用 POI 实现 HTML 和 Word 相互转换 在本文中，我们将详细介绍如何使用 Java 和 Apache POI 库实现 HTML 和 Word 之间的相互转换。POI 库是一个流行的 Java 库，提供了许多实用的功能来处理 Microsoft ...
word简历在线编辑-vue
01-17
技术栈： webpack ----打包神器 vue-cli ----快速构建项目 scss ----便利的css大法 element-ui ---- UI组件库 normalize.css ---- 重置掉该重置的样式 ...html2canvas ---- HTML转成canvas jsPDF ---- 转成PDF
word文档转html在线预览Demo
07-20
"Word文档转HTML在线预览Demo"就是一个典型的示例，它展示了如何将Microsoft Word创建的文档转换为HTML格式，以便在网页上进行预览。这个过程涉及到多个技术层面，包括文件读取、格式转换和前端展示。 1. **文件...
word文档转成Html方案
02-23
这个"word文档转成Html方案"提供了使用Java编程语言实现这一功能的方法。以下是对这个方案的详细解析： 首先，我们来看看核心标签："Java"、"富文本"、"word"、"doc"和"html"。这表明我们要讨论的是一个Java项目，...
将HTML导出生成word文档
ycs_0405的专栏
11-14 370
转自：https://www.cnblogs.com/aaron-pan/p/7132059.html 通过jquery.wordexport.js导出word 备注：兼容IE9以上 大概浏览了下jquery.wordexport.js插件的代码，了解到了通过该插件可以导出文本和图片，而图片首先通过canvas的形式 绘制，文本则需要再依赖FileSaver.js插件，FileSaver.js插件则主要通过H5的文件操作新特性new Blob()和new FileReader() 来实现文本的导出
vue把html导出为word
m0_47408822的博客
11-02 3417
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/excel
Stitch_xiao的博客
06-22 5487
需求：将页面整成理想样式，将想要的那一部分页面导出成word,不用写模板，按照当前页面样式导出即可。第四步：获取dom节点myContainer并导出（我写的行内样式）第二步：给到处那部分的容器起个id名。第三步：在需要的地方引入依赖。第一步：安装需要的依赖。
vue pdf转word
05-17
Vue 是一个Web开发框架，主要用于构建用户界面。它本身并不提供PDF转Word的功能，但是可以使用第三方库来实现。下面介绍两个常用的库：pdf.js和docx.js。 1. 使用pdf.js将PDF文件转换为HTML格式，然后使用docx.js将HTML格式转换为Word格式。 ``` // 引入pdf.js和docx.js库 import pdfjsLib from 'pdfjs-dist'; import Docxtemplater from 'docxtemplater'; // 将PDF文件转换为HTML格式 pdfjsLib.getDocument('path/to/pdf/file.pdf').promise.then(function(pdf) { pdf.getPage(1).then(function(page) { var viewport = page.getViewport({ scale: 1.0 }); var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext).promise.then(function() { var html = canvas.toDataURL('image/jpeg'); // 将HTML格式转换为Word格式 var doc = new Docxtemplater(); doc.loadFile('path/to/word/template.docx'); doc.setData({ html: html }); doc.render(); var output = doc.getZip().generate({ type: 'blob' }); saveAs(output, 'output.docx'); }); }); }); ``` 2. 使用pdf.js将PDF文件转换为文字格式，然后使用docx.js将文字格式转换为Word格式。 ``` // 引入pdf.js和docx.js库 import pdfjsLib from 'pdfjs-dist'; import Docxtemplater from 'docxtemplater'; // 将PDF文件转换为文字格式 pdfjsLib.getDocument('path/to/pdf/file.pdf').promise.then(function(pdf) { pdf.getPage(1).then(function(page) { page.getTextContent().then(function(textContent) { var text = ''; textContent.items.forEach(function(item) { text += item.str; }); // 将文字格式转换为Word格式 var doc = new Docxtemplater(); doc.loadFile('path/to/word/template.docx'); doc.setData({ text: text }); doc.render(); var output = doc.getZip().generate({ type: 'blob' }); saveAs(output, 'output.docx'); }); }); }); ``` 以上是两种实现方式，具体选择哪种方式取决于你的实际需求。建议先了解一下pdf.js和docx.js的使用方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值