前端实现在线预览pdf、word、xls、ppt等文件

最新推荐文章于 2025-03-13 20:26:25 发布
最新推荐文章于 2025-03-13 20:26:25 发布
阅读量3.4k 收藏 32
点赞数 24
分类专栏： 大前端 文章标签： 前端 pdf word
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/springdk2009/article/details/136233936
版权

1、前端实现pdf文件在线预览功能

方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览

1

<a href="文档地址"></a>

方式二、通过jquery插件jquery.media.js实现 这个插件可以实现pdf预览功能（包括其他各种媒体文件）但是对word等类型的文件无能为力。 实现方式： js代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

Js:

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>  

<script type="text/javascript" src="jquery.media.js"></script>

Html:

<body>           

    <div id="handout_wrap_inner"></div>       

</body>

调用方式：

<script type="text/javascript">  

 $('#handout_wrap_inner').media({

        width: '100%',

        height: '100%',

        autoplay: true,

        src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',

            }); 

</script>

方式三、直接通过页面内嵌iframe

1

$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));

此外还可以在iframe标签之间提供一个提示类似这样

1

2

3

4

5

<iframe :src="previewUrl" width="100%" height="100%">

This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>

</iframe>

方式四、通过标签嵌入内容

1

<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">

此标签h5特性中包含四个属性：高、宽、类型、预览文件src！ 与< iframe > < / iframe > 不同，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到！

方式五、标签和iframe使用差别较小

1

2

3

4

5

<object :src="previewUrl" width="100%" height="100%">

This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>

</object>

除方式二以外其他都是直接通过标签将内容引入页面实现预览

方式六、PDFObject

PDFObject实际上也是通过标签实现的直接上代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

<head>

    <title>Show PDF</title>

    <meta charset="utf-8" />

    <script type="text/javascript" src='pdfobject.min.js'></script>

    <style type="text/css">

        html,body,#pdf_viewer{

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

    </style>

</head>

<body>

    <div id="pdf_viewer"></div>

</body>

<script type="text/javascript">

    if(PDFObject.supportsPDFs){

        // PDF嵌入到网页

        PDFObject.embed("index.pdf", "#pdf_viewer" );

    } else {

        location.href = "/canvas";

    }

</script>

</html>

还可以通过以下代码进行判断是否支持PDFObject预览

1

2

3

4

5

if(PDFObject.supportsPDFs){

   console.log("Yay, this browser supports inline PDFs.");

} else {

   console.log("Boo, inline PDFs are not supported by this browser");

}

方式七、PDF.js

PDF.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件，非常强大，能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。

2、word、xls、ppt文件在线预览功能

word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提：资源必须是公共可访问的)

1

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'></iframe>

src就是要实现预览的文件地址 具体文档看这微软接口文档

补充：google的文档在线预览实现同微软（资源必须是公共可访问的）

3、word文件

XDOC可以实现预览以DataURI表示的DOC文档，此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览，具体实现方法请看官方文档

下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制

1

<a href="XDOC文档预览服务" target="_blank" rel="nofollow">XDOC</a>

4、excel文件

目前excel文件已经有了类似pdf.js那样的解析sheet.js

总结：

1、免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览（不可编辑）

2、利用后端将文件转为图片，前端以图片形式预览（可行方案）

3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等

jsp实现在线预览pdf、word、xls、ppt等文件
空空说技术的博客
05-11 2万+
最近在做一个共享数字化平台，一些所涉功能知识记录一下。 、其他教程写得太老了，可能到如今已经不再适用。 1、jsp实现pdf文件在线预览功能 方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 &lt;a href=”文档地址...
在线浏览pdf doc html,前端实现在线预览pdf、word、xls、ppt等文件
weixin_33514864的博客
06-10 1666
1、前端实现pdf文件在线预览功能方式一: 通过a标签href属性实现pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览方式二: 通过jquery插件jquery.media.js实现这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。实现方式：html结构：调用方式：...
前端面试：如何实现预览 PDF 文件？
最新发布
m0_67537062的博客
03-13 1251
这种方式通常涉及将 PDF 传递给在线服务，并使用其提供的 URL 进行展示。在前端开发中，实现 PDF 文件的预览是一个常见需求，尤其是在应用程序中需要用户查看文档时。如果需要更复杂的功能（如缩放、搜索、表单填写等），Adobe 的 PDF.js 是一个非常流行的库，可以用来在浏览器中渲染 PDF。最简单的方式是使用 HTML 的 <iframe> 元素，可以直接在网页中嵌入 PDF 文件。在实际工作中，通常会结合具体的应用场景和项目需求选择最适合的实现方式。首先，引入 PDF.js。
文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览
热门推荐
fhey的博客
05-27 4万+
本文主要介绍了word、excel、pdf、ppt等文件纯前端实现在线预览的方式，从本文的测试情况来看前端实现预览最好的效果还是PDF（或者是图片），不会出现一些文字错乱和乱码的问题，所以一般好的方案就是后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
04-21
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览
开源世界
03-08 2870
前言 因为业务需要，很多文件需要在前端实现预览，今天就是了解一下吧。 实现方案 找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。 docx文件实现前端预览 代码实现 首先npm i docx-preview 引入renderAsync方法 将blob数据流传入方法中，渲染word文档 import { defaultOptions, renderAsync } from "docx-preview"; renderAsync(buffer, docu
web前端 ，pdf格式文档在线预览
06-23
支持ie什么的、浏览远程pdf文档，在线预览
前端如何实现 Word 在线预览_前端预览word文件
2401_84419009的博客
04-27 2427
如果你的需求不是必须要在前端直接预览 Word 文件，你也可以将 Word 文件转换为其他格式，例如 PDF 或图片，然后在前端展示转换后的文件。这样可以使用一些现有的 PDF 预览库或图片展示库来实现预览功能。无论使用哪种方法，都需要注意文件的安全性和隐私保护。确保只有授权用户能够访问和预览文件，并采取适当的安全措施来防止恶意访问和下载。来将 Word 文件转换为 HTML 格式，然后在前端进行展示。在前端实现 Word 文件的在线预览，可以使用第三方库。
如何前端实现在线预览pdf、word、xls、ppt等文件
04-27
本文将详细介绍六种在前端实现在线预览pdf、word、xls、ppt等文件的方法。 首先，最传统也是最简单的方法是使用HTML的`<a>`标签。通过设置`href`属性指向文件的URL，用户点击链接后浏览器会自动打开或下载文件。...
纯前端文档预览，全网支持最全，Vue实现，无需后端，支持Word、Excel、PPT、pdf、文本、图片，附接入demo和文档，新增支持doc, xls文件
02-09
3. 支持所有文本、代码格式，所有主流图片格式，.mp4，.docx，doc，.xlsx，xls，.pptx, .pdf，.md 等主流文档格式的纯前端预览 4. 附带接入demo，使用纯js实现，可以用于任何场景 注意，本代码完全原创，2022年就...
Vue实现文件预览，支持word excel pdf ppt image txt mp4等格式
10-14
在Vue.js开发中，有时我们需要实现前端文件预览功能，以提供用户在不下载文件的情况下查看内容。这个功能尤其适用于word文档、excel表格、pdf、ppt演示文稿、图像、文本文件、json数据以及视频文件如mp4。下面将详细...
web项目使用OpenOffice实现前端在线预览office、pdf等文档源码
05-13
web项目使用OpenOffice实现前端在线预览office文档源码，同步博文讲解使用，手把手教学：https://blog.csdn.net/ITBigGod
在线文档预览，支持ppt,word,excel在线预览
09-25
使用OpenOffice + jodconverter 将文档转成pdf,通过pdf.js在页面展示 写的是Stringboot 版的demo,核心代码很少，很容易懂
纯前端文档预览，还要支持所有主流格式，有这一篇就足够了
wybaby168的博客
02-09 3万+
纯前端实现本地和远端文件预览，无需任何插件和第三方链接，无需后端。
前端文件预览整合（一）
qq_43630714的博客
10-25 3006
在 Web 应用中，文件预览功能是一个常见且实用的需求。最下方有源码，大佬可以跳过简单介绍可以直接拉到下方查看。
前端实现文件预览（pdf、excel、word、图片）
autumnmn的博客
06-20 2971
前端实现文件预览（pdf、excel、word、图片），使用pdfjs第三方包和canvas实现pdf文件渲染，使用xlsx预览excel文件，使用docx-preview预览word文件，使用frame框架预览图片
记录--前端实现文件预览(word、excel、pdf、ppt、xmind、 音视频、图片、文本) 国际化
林恒的博客
06-12 913
在这之前公司项目的文档预览的方式都是通过微软在线预览服务，但是微软的在线服务有文件大小限制，想完整使用得花钱，一些图片文件就通过组件库antd实现，因为我们项目存在多种类型的文件，所以为了改善用户的体验，决定把文件预览单独弄一个拆出一个项目出来，我们先看一下最终预览效果。如果这些基础的文档渲染render组件，不符合业务需求，你也可以自定义render组件在你自己的项目中，然后跟随pluginsRenders传入即可return (
前端常见预览文件功能实现（word、pdf、video）
weixin_46528122的博客
10-14 464
1）html2）js （三种方式）
前端实现在线预览PDF、Word、Excel、PPT全攻略
"前端实现在线预览pdf、word、xls、ppt等文件的方法" 在前端实现在线预览各种文件类型，如PDF、Word、Excel、PowerPoint等，通常需要利用浏览器的内置支持或者借助第三方库和插件。以下是一些常用的技术方案： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值