vue预览word文档(.docx)

最新推荐文章于 2024-04-29 04:29:53 发布
最新推荐文章于 2024-04-29 04:29:53 发布
阅读量280 收藏
点赞数
文章标签： vue.js word 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47218354/article/details/131725486
版权

1、安装vue-doc-preview

       npm install vue-doc-preview

2、导入

 3、使用

 

pdfsrc是后端返回的文档地址

 

weixin_47218354
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在线文档预览，支持ppt,word,excel在线预览
09-25
使用OpenOffice + jodconverter 将文档转成pdf,通过pdf.js在页面展示 写的是Stringboot 版的demo,核心代码很少，很容易懂
word文件预览
01-15
word文件预览，是百度文库的样式，自己写的，好用，需要的工具有openoffice和swftools，是将word转pdf，再转swf用的，工具网上很好找，太大，就不上传了。
【Vue项目实践】实现在线预览word文件、excel文件(1)，网易资深Web前端架构师
m0_60635283的博客
04-18 1634
/ 工作表名称集合。（2）引入import mammoth from “mammoth”;（1）安装 npm install --save mammoth。excelURL: “”, //文件地址，看你对应怎末获取、赋值。wordURL:‘’ //文件地址，看你对应怎末获取、赋值。（1）安装 npm install --save xlsx。// 具体函数调用位置根据情况而定。// 具体函数调用位置根据情况而定。1.引用mammoth.js。// 在线查看excel文件。// 在线查看word文件。
vue中预览docx、xlsx、pptx、pdf
可达鸭的博客
04-11 1533
我这里多了个showPreview用来处理ppt的预览，因为他原生的ppt预览是增加一个弹窗，我需要当前页面展示，样式不符合要求，我就修改了,\node_modules\ranui\dist\components\preview\index.js 里对应第一个文件。前言：其实本来是要做全类型文件预览的，但是一直找不到合适的doc,xlx,ppt预览插件。要是有可以使用的，可以评论推荐给我。好像是pdf在预览时样式很奇怪：所以pdf我是通过ifream进行预览。我使用的node版本：v18.19.1。
在前端页面中预览word和pdf文件
nice444638562的博客
07-17 2044
需要注意的是，由于涉及到在新窗口中加载组件，并非所有浏览器都支持此操作。因此，请确保你的应用程序环境和浏览器支持在新窗口中加载 Vue 组件。这样，当你点击 “预览PDF” 或 “预览DOC” 按钮时，会打开一个新窗口并预览相应的文件。另外，如果你的需求更加复杂，你可能需要进一步定制预览功能并适应你的项目需求。是要预览的文件的相应 URL。你需要将它们替换为你自己的文件 URL。在上面的示例中，我们在新窗口中打开了一个 HTML 页面，并将。安装完成后，你可以在你的 Vue 组件中使用它们。
vue2+webpack4（babel6）+docx-preview实现word预览功能
Actualee的博客
03-06 1455
vue2+docx-preview实现word的docx类型文件预览功能
vue 预览 word
qq_37299479的博客
01-31 2万+
docx-preview 预览word
vue中使用docx-preview插件预览word文档（后端express）
热门推荐
qq_34169240的博客
04-02 2万+
问题描述 本文记录了一下预览word文档的功能。需要用到： 前端：vue 后端：express 插件：docx-preview 思路分析 后端express代码中读取文件夹中的 .docx 类型文件 然后将其以可读流的方式返回给前端一个blob流文件 后端返回的流文件前端收到以后，执行docx-preview插件的renderAsync方法即可渲染出预览的效果 我们先看一下效果图 代码 后端express代码 // 引入文件模块 const fs = require("fs")
Vue预览word/pdf文件(内外网均可)
夜の雨的博客
11-28 5896
预览word文件实现方式有1 将文件放在前端静态文件中 实现本地预览缺点:前端包臃肿 多文件不适合2 将文件放在服务器指定目录下 内外网均可预览。
vue怎么实现office，PDF，图片，OFD文件预览
一步一个脚印，踏实努力，向着目标前进
06-15 7623
要在Vue中实现Office、PDF、图片和OFD文件的预览，可以使用不同的第三方库来处理不同类型的文件。以下是一个详细的教程和代码示例，使用vue-pdf库来预览PDF文件，使用库来预览Office文件（如Word、Excel和PowerPoint），使用库来预览图片文件，使用库来预览OFD文件。
vue 预览 word_vue预览word(1)
最新发布
2401_84437530的博客
04-29 819
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue实现在线预览pdf文件和下载（pdf.js）
01-21
最近做项目遇到在线预览和下载pdf文件，试了多种pdf插件，例如jquery.media.js（ie无法直接浏览） 最后选择了pdf.js插件（兼容ie10及以上、谷歌、安卓，苹果） 强烈推荐改插件，以下介绍用法 （1）下载插件 下载路径： pdf.js （2）将下载构建后的插件放到文件中public（vue/cli 3.0） （3）在vue文件中直接使用，贴上完整代码 <iframe :src=pSrc width=100% height=100%></iframe> <
docx-preview.js与.netCore后端实现预览Word文档
11-15
有需求.net core项目中使用docx-preview.js预览Word文档，网上很多资料，主要是Vue如何使用docx-preview预览Word文档，很少HTML网页中使用，配合后端的更少，我掉了一些头发弄了出来，记录一下，希望对其他人也有...
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件 预览
04-06
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件转Blob流 预览。实现前端选择文件 直接在页面展示，或者请求后端获取base64 string 字符串 转码 在前端页面展示
纯前端文档预览，Vue实现，无需后端，支持Word、Excel、PPT、pdf、文本、图片，附接入demo和文档
02-09
纯原创资源，盗用必究，仅用于学习和交流，持续更新，...3. 支持所有文本、代码格式，所有主流图片格式，.mp4，.docx，.xlsx，.pptx, .pdf等主流文档格式的纯前端预览 4. 附带接入demo，使用纯js实现，可以用于任何场景
微信小程序预览word，excel，doc文件代码
05-21
微信小程序预览word，excel，doc文件Demo代码，下载代码直接使用微信小程序打开运行即可，可以使用微信小程序对应的真机调试进行测试预览功能
html-docx-js-typescript:将HTML文档转换为docx格式
05-02
将HTML文档转换为docx格式。 正在安装 npm install html-docx-js-typescript --save-dev 用法 支持node.js和浏览器环境，包括vue / react / angular。 Vue.js用法演示： import { asBlob } from '...
vue3 - 网页在线预览 office word 文档，打开 .doc / .docx 文件显示并解析文档内容功能效果（超详细示例功能源码，复制粘贴后开箱即用）
高级前端工程师
05-05 7014
vue3 word预览，vue3中预览word，vue3中实现word的预览功能，Vue3实现Word文档在线预览功能，vue3实现word文件预览，vue3 预览docx文件，vue-doc-preview:Vue文档预览组件，vue3实现本地预览word(docx)，vue3中word文件预览功能的实现，vue3在线预览word，Vue3中如何实现在线预览word文件，VUE3 预览docx，Vue3在线预览word，vue3中怎么预览解析word文档，vue3网页如何打开office word文档，
vue 预览 word 文件 docx
IT_iosers的博客
03-01 487
【代码】vue 预览 word 文件 docx。
vue3 预览word文档
08-20
在Vue 3中，可以使用第三方库`docxtemplater`来预览Word文档。可以通过引入`docxtemplater`库并传递Word文档的URL来实现预览。下面是一种可能的实现方法： 1. 首先，安装`docxtemplater`库。可以通过npm或yarn来安装： ```bash npm install docxtemplater ``` 2. 在Vue组件中引入`docxtemplater`库和相关的依赖： ```javascript import Docxtemplater from 'docxtemplater'; import StreamSaver from 'streamsaver'; import axios from 'axios'; ``` 3. 创建一个方法来处理Word文档的预览： ```javascript methods: { async previewWordDocument(url) { // 使用axios来获取Word文档的数据流 const response = await axios.get(url, { responseType: 'arraybuffer' }); const content = response.data; // 将数据流传递给docxtemplater库 const doc = new Docxtemplater(content); // 渲染Word文档 doc.render(); // 将渲染后的文档转换为Blob对象 const blob = doc.getZip().generate({ type: 'blob' }); // 通过StreamSaver库将Blob对象保存为本地文件并预览 StreamSaver.saveAs(blob, 'preview.docx'); } } ``` 4. 在需要预览Word文档的地方调用`previewWordDocument`方法，并传递Word文档的URL： ```javascript this.previewWordDocument('http://example.com/word.docx'); ``` 这样，当调用`previewWordDocument`方法时，Vue组件将通过axios获取Word文档的数据流，然后使用docxtemplater库来渲染Word文档，并最终通过StreamSaver库将渲染后的文档保存为本地文件并预览。请注意，这只是一种可能的实现方式，实际上可能还会涉及到其他因素，如文件类型的判断和处理等等。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [VUE3中实现word的预览功能](https://blog.csdn.net/admans/article/details/128110181)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue3中文件预览功能的实现，包括 图片、pdf、word、excel的实现](https://blog.csdn.net/lucklymm/article/details/128126001)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值