vue预览word文件之mammoth

已于 2022-07-08 14:15:15 修改
阅读量4.8k 收藏 3
点赞数
分类专栏： vue插件 文章标签： javascript 前端 vue.js
于 2022-07-07 10:33:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41175327/article/details/125653873
版权

一、步骤

1、下载依赖：

npm install --save mammoth

2、在需要展示word文件的页面中引入并使用

<template>
    <div class="home">
        <div v-show="bigImg.type == 'DOCX'" class="word-box" id=&#
最低0.47元/天 解锁文章
zlinger1
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue中的浏览量_Vue中使用matomo进行访问流量统计的实现
weixin_39687422的博客
12-22 949
前言之前做到了一个页面及接口访问流量统计的需求, 然后在网上找了很多帖子,发现有些有的但是写的都不是很详细,所以今天就整理了一下正文第一步首先自然是引入matomonpm i vue-matomo复制代码第二步 在main.js中注册一下matomoimport VueMatomo from 'vue-matomo'Vue.use(VueMatomo, {host: 'http://matomo...
vue word 转换html渲染页面(mammoth)
2c不高兴的博客
11-29 7173
用到的插件mammoth 安装 npm install --save mammoth tip：只能预览.docx文件 (只能转换.docx文档，转换过程中复杂样式被忽，居中、首行缩进等) 完整代码 <template> <div class="word-wrap"> <div id="wordView" v-html="wordText" /> </div> </template> <script> // docx文
Vue Word预览之mammoth.js
JK酱
06-23 1万+
Mammoth 通过使用文档中的语义信息并忽略其他细节生成简单干净的 HTML
Python之Mammoth库的详解和使用
最新发布
创作不易，请多支持，将为本站提供更多「有价值的文章」。
06-01 856
docx 使用的结构与 HTML 的结构有很大的不匹配，这意味着对于更复杂的文档来说，转换不太可能完美。要将段落、行或表与特定样式匹配，您可以按名称引用样式。在转换每个段落时，Mammoth 会找到文档元素匹配器与当前段落匹配的第一个样式映射。建议生成 HTML 并使用单独的库将 HTML 转换为 Markdown，并且可能会产生更好的效果。默认情况下，所有文本的下划线都会被忽略，因为下划线可能会与 HTML 文档中的链接混淆。：添加到任何生成的 ID 前面的字符串，例如书签、脚注和尾注使用的 ID。
docx转换html(mammoth)
qq_20074443的博客
04-16 1万+
使用mammoth.js将docx文件转换成html 前言 最近接到一个需求，要求是把docx文档转换成html,显示在页面上，翻了好多资料，尝试了iframe嵌套，但问题是会自动下载，也不会显示html。于是继续搜索，找到了mammoth,一个将docx文件转换成html的东西，最后完美的解决了问题，下面谈谈使用心得吧！ 实现步骤 1 首先将源代码下载了到本地，传送门：http://www.gi...
【js】Mammoth.js的使用：将.docx 文件转换成HTML
热门推荐
xilejie的博客
12-18 2万+
将.docx文档转换成HTML。 用文档中的语义信息并忽略其他细节来生成简单干净的 HTML。 不是尝试完成复制样式（字体、大小、颜色等）。 API mammoth.convertToHtml(input, options） ：把源文档转换为 HTML 文档 mammoth.convertToMarkdown(input, options) ：把源文档转换为 Markdown 文档。 mam...
moment.js 使用方法总结
u011200562的博客
10-22 1万+
目录 一、引入moment.js 1.Node.js方式引入 (｡◝‿◜｡) 2.浏览器方式引入 ლ(╹◡╹ლ ) 二、设定moment区域为中国 三、使用 1.获取时间Ⴚ(●ტ●)Ⴢ 2.设置时间 ︶ε╰✿ 3.格式化时间 =≡Σ((( つ•̀ω•́)つ 4.比较时间 (◍'౪`◍)ﾉﾞ 5.转化为JavaScript原生Date对象 ✿◡‿◡ 6.日期格式化 ʅ(‾◡◝)ʃ 输出实例 7.相对时间 (◕ܫ◕) 输出实例 8.日历时间 (๑¯ิε ¯ิ๑) 输出实例 9.多语.
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件 预览
04-06
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件转Blob流 预览。实现前端选择文件 直接在页面展示，或者请求后端获取base64 string 字符串 转码 在前端页面展示
vue实现word，pdf文件的导出功能
10-18
给大家介绍了vue实现word或pdf文档导出的功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue实现文件预览，支持word excel pdf ppt image txt mp4等格式
10-14
在Vue.js开发中，有时我们需要实现前端文件预览功能，以提供用户在不下载文件的情况下查看内容。这个功能尤其适用于word文档、excel表格、pdf、ppt演示文稿、图像、文本文件、json数据以及视频文件如mp4。下面将详细...
vue实现pdf文档在线预览功能
12-14
针对android系统不支持pdf文档在线预览，可通过引入pdf.js插件实现，其具体实现步骤如下 一、引入插件 方式一：npm install –save pdfjs-dist，安装完成后在vue项目的node_modules出现如下依赖 方式二：只引入pdf....
VC 读取Word文档内容
06-27
通过VC或者mfc打开word文档，并读取文档中的内容。。。。。
mammothJs解析docx文件
monkey_xiaoda的博客
08-26 2493
今天接到一个任务，任务要求是把一个静态页面的表格内的每个单元格内容根据给出的Word文档内表格的内容一一替换； what？？？ 这要是一个个复制、粘贴，不得直接弄到半夜回家吃宵夜啊。。。 于是乎就想着有没有啥封装好的可以直接用的，一通度娘，找到了mammothJs； 相关CDN地址：https://cdn.bootcss.com/mammoth/1.4.8/mammoth.browser.js 直接上代码： <!DOCTYPE html> <html lang=".
vue前端上传doc文件并读取文件内容
mumushuiding的博客
06-16 6160
1. 上传文件 如iview中的： <Uploadaction="":before-upload="handleBeforeUpload"accept=".doc,.docx"> <Button:loading="uploadLoading">上传文件</Button> </Upload> 2. 读取文件
vue移动端文件预览
weixin_40400844的博客
12-10 8818
vue移动端文件预览前言：整体思路：具体实现：一、外壳（vViews.vue）：二、文件预览：1.图片预览：2.pdf文件预览：3.docx文件预览：4.excel表格预览（xls、xlsx格式表格）：5.txt文件预览：三、补充外壳文件css样式： 前言： 最近遇到一个移动端需求，要求在移动端预览上传的附件，在网上找了很多资料，最后参考CSDN博主「蛋蛋fighting哈湫」的原创文章实现了功能，并结合自己的项目情况，整理了这份文档。 原文链接：https://blog.csdn.net/u0124396
移动端在线预览pdf，word资源
舒婷的博客
03-04 1042
问题1：https网页不支持嵌入http资源 报错：Mixed Content: The page at ‘https://xxx.html’ was loaded over HTTPS, but requested an insecure resource ‘http://xxx.pdf’. This request has been blocked; the content must be served over HTTPS. 解决：ngnix部署，http变成https访问 问题2：pdf
vue项目预览pdf 和word
yuanfanlove的博客
01-19 407
vue项目pdf预览
移动端如何浏览EXCEL、word、ppt、pdf等文件在线预览？
weixin_71251814的博客
07-18 1883
PDF,EXECLE,WORD,PPT在线预览
vue在线预览word文档
09-23
在Vue中实现在线预览Word文档需要借助一些第三方库和服务。以下是一种实现方式： 1. 首先，你可以使用`mammoth.js`库将Word文档转换为HTML格式。这个库可以解析.docx文件并将其转换为HTML字符串。 2. 接下来，你可以使用`vue-html2pdf`库将HTML字符串转换为PDF格式。这个库可以将HTML内容渲染为PDF文档。 3. 最后，你可以使用`<iframe>`或`<embed>`标签将PDF文档嵌入到Vue组件中，以实现在线预览。 以下是一个简单的示例代码： ```vue <template> <div> <iframe :src="pdfUrl" width="100%" height="600px"></iframe> </div> </template> <script> import VueHTML2PDF from 'vue-html2pdf'; import mammoth from 'mammoth'; export default { data() { return { pdfUrl: '' }; }, methods: { async generatePDF() { const response = await fetch('path/to/your/word/document.docx'); const arrayBuffer = await response.arrayBuffer(); const result = await mammoth.extractRawText({ arrayBuffer }); VueHTML2PDF.generatePDF(result.value, pdf => { this.pdfUrl = pdf; }); } }, mounted() { this.generatePDF(); } }; </script> <style> iframe { border: none; } </style> ``` 在上面的示例中，我们首先引入了`vue-html2pdf`和`mammoth`库。然后，我们定义了一个`pdfUrl`变量来存储生成的PDF文件的URL。 在`generatePDF`方法中，我们使用`fetch`函数获取Word文档的二进制数据，并使用`mammoth`库将其转换为HTML格式的字符串。接下来，我们使用`vue-html2pdf`库将HTML字符串转换为PDF文件，并将生成的PDF文件的URL赋值给`pdfUrl`变量。 最后，在组件的`mounted`生命周期钩子中调用`generatePDF`方法来生成PDF并将其嵌入到Vue组件中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值