在线预览上传的doc,pdf等word文件

最新推荐文章于 2024-01-25 15:14:01 发布
最新推荐文章于 2024-01-25 15:14:01 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ju__ju/article/details/105117176
版权

项目中需求:后台上传一些doc或者pdf等文件,需要前端实现这些文件的在线预览.

思路:接口会返回一个路径,结合<embed/>标签,实现文件的在线预览

其中type是指定类型,

src绑定的是我通过文件UID过去文件详情时,拿到的文件路径,

filterUrl是项目中main.js中设置的过滤器,根据自己需要设置,各个项目均不同

使用效果如上,需要自己调整embed标签的宽高

橘哥哥
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js在线预览wordpdf.rar
01-10
js在线预览pdf word ；pdf.js pdf.worker.js pdfjsversion.js webodf.js
OpenOffice：实现在线预览，word文档 doc、xlsx、pdf、txt等
03-29
OpenOffice安装说明： 1.软件说明：实现在线预览，word文档 doc、xlsx、pdf、txt等 2.安装OpenOffice：一直下一步即可，默认安装地址：C:\Program Files (x86)\OpenOffice 4
HTML里显示pdf、word、xls、ppt的方法
南余.的博客
04-22 6773
文章目录一、PDF文件在线预览1.HTML5新标签embed定义和用法2. iframe标签3. object二、word、xls、ppt在线预览三、XDOC在线预览 提示：以下是本篇文章正文内容，下面案例可供参考 一、PDF文件在线预览 1.HTML5新标签embed定义和用法 embed 标签定义嵌入的内容，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到。 实例： <embed src="/file/操作手册.pdf" type="applicati
Vue实现文档在线预览功能，上传预览PDF、Word等office文件
最新发布
qq_49080170的博客
01-25 2979
Vue实现文档在线预览功能，上传预览PDF、Word等office文件
HTML-embed标签
weixin_34266504的博客
03-14 491
<embed> 标签 <embed> 标签不符合标准网页设计的理念,不赞成使用。<embed> 标签已经被符合标准的 <object> 标签代替。 定义及用法 定义嵌入的内容，比如插件。<embed src="helloworld.swf" />embed可以用来插入各种多媒体，...
embed标记
weixin_33984032的博客
12-16 304
&lt;embed   src="F:\file\03.doc"   width="272"   height="45"   id="doc"&gt;   &lt;/embed&gt;   embed标记可在页面中插入多媒体文件，需要以/embed结尾。较常用的有flash文件（swf）和音频视频文件（mp3、wma、avi、wav、mid、rm、ram等）。embed标记的几个常用属性有： sr
python操作word——python-docx和python-docx-template模块
General_zy的博客
07-21 1万+
前言：项目用到了导出文档，综合考虑使用模块 文档Document 段落Paragraph 文字块Run就是docx文档就是寻常段落如下，短句子中有多种不同的样式，则会被划分成多个文字块。 如果所示，这个paragraph一共四个run。 Document - Table - Row/Column - Cell四级结构 读操作 获取段落 三个部分：一个doc由多个paragraph组成 获取段落文本内容 获取文字块文本内容 一个paragraph段落由一个或者多个run文字块组成 遍历表格 表格设置字体
vue - - - - - 在线预览常见文件格式 .doc, .docx, .xls, .xlsx,.pdf,.ofd
Dark_programmer的博客
06-09 4266
在线预览常见文件格式 & 预览问题
在线预览文档的前端实现方法
Caleb的博客
10-13 1195
如果需要更多的定制性和灵活性，我们可以自己实现一个用于文档预览的组件。可以使用一些开源的 JavaScript 库，如PDF.js或者Viewer.js来解析和渲染文档。这种方式需要更多的开发工作，但是可以根据需求进行自由定制，适应不同的文档类型和展示需求。
文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
fhey的博客
05-27 2万+
本文主要介绍了word、excel、pdf、ppt等文件纯前端实现在线预览的方式，从本文的测试情况来看前端实现预览最好的效果还是PDF（或者是图片），不会出现一些文字错乱和乱码的问题，所以一般好的方案就是后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。
前端实现在线预览pdf、word、xls、ppt等文件
WebDestiny的博客
09-06 1万+
前言：目前免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览，但不可编辑。还有一种方案就是利用后端将文件转为图片，前端以图片形式预览。 一、pdf文件 通过a标签href属性实现 pdf文件理论上可以在浏览器直接打开预览但是需要打开新的标签页面。 <ahref="文档地址"></a> jquery插件jquery.media.js（可以...
使用docx-preview实现docx文件预览处理方式
qq_35315336的博客
03-13 3398
使用docx-preview实现docx文件预览处理方式
uniapp移动端H5在线预览PDF等文件实现源码及注解
10-13
uniapp移动端H5在线预览PDF等文件实现源码及注解：https://a-jing.blog.csdn.net/article/details/120744302
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件 预览
04-06
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件转Blob流 预览。实现前端选择文件 直接在页面展示，或者请求后端获取base64 string 字符串 转码 在前端页面展示
flutter_filereader:Flutter实现的本地文件(pdf word excel 等)查看插件,非在线预览
05-17
Flutter FileReader本地文件视图小部件，支持多种文件类型，例如Doc Eexcl PPT TXT等，Android由腾讯X5实现（不支持GooglePlay），iOS由WKWebView实现依靠它将此添加到包的pubspec.yaml文件中： 1.9.1 dependencies:...
elementUI中input输入框,正则输入,并限制输入长度
热门推荐
ju__ju的博客
07-30 3万+
<el-input v-model="item.userScore" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" maxlength="4" > </el-input>
vue中点击按钮下载文件
ju__ju的博客
10-09 3万+
项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. <div class="btns"> <el-button size="mini" type="primary" @click="$router.push(`/portal/${item.id}/detail`)">查看软件</el-bu...
elementUI中当form中select选择器中的数据发生改变时清空当前选中的状态
ju__ju的博客
08-07 1万+
当选择题库时,获取到章和节的列表,章节才能够被选择 现在要实现的效果是当题库发生改变时,章节列表也发生改变,需要清空当前选择项 如图,题库改变了,章节列表的数据也发生改变了 <el-form ref="form" :model="form" label-width="50px" :rules="rules"> <el-form-item label="章节:"> ...
vue+elementUI实现模糊搜索功能
ju__ju的博客
08-13 1万+
computed: { searchData: function() { var search = this.search; //此处的etquestions均为data, 这个etquestions.content.title是根据自己的需要写,一般写data if (search) { return this.etquestions...
Vue在线预览pdf、word文档插件
05-05
可以使用一些第三方插件来实现Vue在线预览pdf、word文档。以下是两个可选的插件： 1. `vue-pdf`: 一个用于在 Vue 中显示 PDF 文件的 PDF.js 插件。它可以在 Vue 组件中显示 PDF 文件，并且支持缩放、翻页等功能。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值