前端预览上传的pdf文件，并根据后端识别pdf后返回的word文件路径，直接在前端解析展示

已于 2023-04-05 19:36:27 修改
阅读量1.1k 收藏 8
点赞数 2
文章标签： 前端 pdf javascript vue.js
于 2023-04-04 18:05:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43773218/article/details/129958883
版权

在前端上传一个pdf文件，后端识别pdf文件，并返回识别后的word文件路径，前端再根据文件路径直接在页面展示解析word文件的结果，如下图：

上传文件后，先直接预览pdf文件

然后点击文字识别，右边则展示解析的word文件 

 实现过程

首先需要npm安装两个插件，一个预览pdf的插件vue-pdf，一个读取word文件的插件docx-preview

 上传组件代码

<el-upload ref="upload" action="#" :on-remove="handleRemove" :on-preview="showPdf" 
  :limit="1" :file-list="picList"
最低0.47元/天 解锁文章
可狗可乐
关注
前端展示pdf流文件
qq_41694319的博客
04-14 3438
参考文章https://www.jianshu.com/p/242525315bf6 参考文章https://blog.csdn.net/Tastill/article/details/84572408 下载PDFJS:https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端，生成blob地址预览 <iframe id="PDF" src...
前端面试题（超全！）
weixin_57136547的博客
09-09 4899
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：/*标准盒子模型*//*IE盒子模型*/伪元素什么是伪元素：是用于创建并操作元素的特定部分，它可以在DOM中创建一个不存在的元素，并为其添加样式。::before：在元素内容之前插入内容。
PDF.js 解析PDF文件demo
09-05
pdf.js 解析PDF文件DEMO 下载这个DEMO 轻松搞定在线解析PDF文件 支持翻页浏览 pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持 注意：只兼容支持HTML5的浏览器
PDF解析
北落师门XY的博客
03-28 9748
PDF是一种查看方便但解析起来非常不方便的工具，不理解为什么到现在还没对这个问题从源头优化一下。对PDF文件的解析，一般分成对pdf文本等内容的解析、将pdf转化成图像再解析这两种。 一、pdf 解析文本 公认比较好用的pip库是pdfplumber，此外fitz也可以，经费够可以调pdflux这种服务商。fitz仅处理文本，pdfplumber还可以处理表格。 1.1 pdfplumber解析文本 PDFPlumber是基于 PDFMiner 构建...
【Vue】上传PDF功能
最新发布
所有专家都曾始于新手
03-14 1241
JavaScript/TypeScript 中的模块导入语法，用于从 Element Plus 组件库中导入 ElUpload 和 ElDialog 两个组件从 @element-plus/icons-vue 图标库中按需导入多个图标的语法。UploadFilled：一个“上传”图标，通常用于表示文件上传操作。导出一个 Vue 组件，使其可以在其他文件中被导入和使用。
element上传文件vue-pdf预览
weixin_48567214的博客
12-23 1578
<template> <div> <el-upload multiple drag action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileArr" :before-upload="beforeUpload" :on-change="imgPreview" :on-preview="handlefile
前端在线解析预览PDF格式文件，带目录索引跳转
weixin_30498807的博客
07-17 1539
demo源码地址：https://github.com/hs610/pdf 默认目录是展开的，如需折叠目录 1.修改pdf_viewer.css里红色框内的css，改变三脚图形的 2.在pdf_outline_viewer.js中124行加上 toggler.className = 'outlineItemToggler outlineItemsHidden'; ...
JavaScript调用后端接口在浏览器中打开Word文档
标题和描述中提到的知识点是如何在网页中使用JavaScript调用后端接口来实现将一个doc文件（Word文档）加载到浏览器中进行查看。实现这一功能，涉及到前端技术与后端技术的结合，以及对文件格式处理的理解。 在具体...
ASP.NET文件预览专家课：Word文档预览问题全解析及解决方案
[ASP.NET文件预览专家课：Word文档预览问题全解析及解决方案](https://learn-attachment.microsoft.com/api/attachments/138790-image.png?platform=QnA) 参考资源链接：[Asp.net实现在线预览Word、Excel、PDF和TXT...
云服务集成助力前端文件处理：提升预览效率与能力
[云服务集成助力前端文件处理：提升预览效率与能力](https://ucc.alicdn.com/pic/developer-ecology/gddchk4d4hnia_700d6beb5951481f8a15a70187fce15f.png?x-oss-process=image/resize,s_500,m_lfit) # 摘要 本文...
前端读取PDF和DOCX文件(干货分享)
m0_74823408的博客
12-21 487
通过适当的JavaScript库或结合后端服务，我们可以有效实现这一功能。在Web开发中，前端页面往往需要处理各种类型的文件，特别是PDF和DOCX这类常见的文档格式。如果不想自己原生去实现这里推荐一个好用js库,他已经帮我们封装好了这些文件的读取能力,直接使用就可以,非常方便.（后者虽然主要在Python中使用，但此处作为参考说明JavaScript库的选择和用法）。是一个纯JavaScript编写的库，适用于在浏览器端渲染PDF文件。对于PDF文件的读取，可以借助一些流行的JavaScript库，如。
把PDF文件展示在前端页面
09-05
这个包里面包含把PDF文件直接展示在前端的js文件和css文件，相应的介绍在https://mp.csdn.net/postedit/82425914
web前端 ，pdf格式文档在线预览
06-23
支持ie什么的、浏览远程pdf文档，在线预览
Word文档上传并解析内容
12-21
ASP.NET上传Word，并对上传的Word的内容进行解析并显示在界面中
前端是怎么解析Excel、PDF、Word、PPT等文件的？
时清云的博客
01-08 855
这是今年的第24篇文章，也是今年的最后一篇文章，完结撒花🎇！！！进入我的个人网站，查看更多精彩❤！
前端解析pdf文件内容二维码
无简介
08-09 1086
前端解析pdf文件内容二维码
后端传入文件流，前台pdf展示（pc端和手机端）
w001yy的博客
05-11 5227
近日项目用到的用文件流传递pdf文件的情况，后端将数据流传到前端，需要前端进行处理然后再预览下载，总结了一下几点方法， 1.PC端 一开始想引用pdf.js插件进行实现，但是总是白屏，借鉴的文章是https://www.jianshu.com/p/242525315bf6，用了里面的方法测试了，但是一直是白屏，展示不出pdf，也没有看到错误提示，最后直接用 window.open(url), 其中url表示的是预览的接口以及参数，简单明了的解决了打开后端传入数据流到前端展示pdf的问题。 2.微信网页h5
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值