广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何使用PDF.JS插件实现在HTML中预览PDF文件
  • 328
分享到

如何使用PDF.JS插件实现在HTML中预览PDF文件

2024-04-02 19:04:59 328人浏览 安东尼
摘要

这篇文章给大家分享的是有关如何使用pdf.js插件实现在html中预览PDF文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。PDF.js是一款基于HTML5建立的PDF阅读器,

这篇文章给大家分享的是有关如何使用pdf.js插件实现在html中预览PDF文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

PDF.js是一款基于HTML5建立的PDF阅读器,兼容大部分主流的浏览器,使用起来,也相对简单。步骤如下:

1.下载PDF.js插件

下载地址:Http://mozilla.GitHub.io/pdf.js/getting_started/#download

2.文件部署

建新文件夹,将PDF.js插件文件放入新建的文件夹。

3.新建index.html

在HTML文件代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="Google" content="notranslate">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>《使用指南》-柠檬课件</title>
    <script>
      function openFile () {
        var url = "pdf.pdf";
        window.open("pdfjs/WEB/viewer.html?file=" + url);
      }
    </script>
  </head>
  <body>
    <input type="button" onclick="openFile()" value="打开">
  </body>
</html>

4.将pdf.pdf文件放到pdfjs/web/下

5.点击浏览即可。

注意:因为pdf.js需要依赖http,https协议。所以直接浏览index打开报错。搭个服务,或者用idea的浏览就可以了。

感谢各位的阅读!关于“如何使用PDF.JS插件实现在HTML中预览PDF文件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: 如何使用PDF.JS插件实现在HTML中预览PDF文件

本文链接: https://www.lsjlt.com/news/73898.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用PDF.JS插件实现在HTML中预览PDF文件
    这篇文章给大家分享的是有关如何使用PDF.JS插件实现在HTML中预览PDF文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。PDF.js是一款基于HTML5建立的PDF阅读器,...
    99+
    2022-10-19
  • Vue实现在线预览pdf文件功能(利用pdf.js/iframe/embed)
    前言 最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了。 在实现的过程中,为了更好地显示效果,我采用了多...
    99+
    2022-11-12
  • Vue使用PDF.js实现浏览pdf文件功能
    目录写在前面开始下载放入项目中制作组件使用写在前面 很头大 , 本来网络实际地址的 pdf 文件直接放在 iframe 的 src 中就可以浏览 pdf 文件的 , 但是对于虚拟地址...
    99+
    2023-05-16
    Vue PDF.js浏览pdf文件 Vue PDF.js pdf文件 Vue PDF.js
  • 如何使用Vue3+Vue-PDF实现PDF文件在线预览
    这篇文章主要介绍“如何使用Vue3+Vue-PDF实现PDF文件在线预览”,在日常操作中,相信很多人在如何使用Vue3+Vue-PDF实现PDF文件在线预览问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使...
    99+
    2023-07-06
  • 怎么使用vue-pdf插件实现pdf文档预览功能
    这篇文章主要介绍了怎么使用vue-pdf插件实现pdf文档预览功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用vue-pdf插件实现pdf文档预览功能文章都会有所收获,下面我们一起来看看吧。vue-p...
    99+
    2023-07-05
  • 如何在vue中使用pdfjs预览pdf文件
    目录前言 思考 库目录解析和下载 使用方法 文件位置 实际调用 问题 总结 前言 在写项目的过程中,偶尔会有使用到pdf的文件,当我们想看pdf文件的时候,你的操作是不是先把pdf...
    99+
    2022-11-12
  • Vue怎么使用vue-pdf实现PDF文件预览
    这篇文章主要介绍了Vue怎么使用vue-pdf实现PDF文件预览的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue怎么使用vue-pdf实现PDF文件预览文章都会有所收获,下面我们一起来看看吧。先看下效果&n...
    99+
    2023-07-05
  • vue3如何实现PDF文件在线预览功能
    目录概述正文创建 vue3 项目添加 PDF 预览插件总结概述 之前我们用 Reactjs + React-PDF 实现了 React 版的 PDF 文件预览,今天我们用 Vue3 ...
    99+
    2022-11-13
  • Vue中接收二进制文件流如何实现pdf预览
    这篇文章主要讲解了“Vue中接收二进制文件流如何实现pdf预览”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue中接收二进制文件流如何实现pdf预览”吧!后台Controller@Requ...
    99+
    2023-06-22
  • Vue中如何实现在线预览word文件、excel文件
    目录实现效果一、查看word1.引用mammoth.js2. 页面布局3. 请求URL显示数据二、查看Excel1.引用sheetjs2.页面布局3.请求URL显示数据三、项目应用:...
    99+
    2022-11-13
  • vue中使用vue-pdf组件实现文件预览及相应报错解决
    目录前言一、安装npm 依赖二、引入组件1、html中使用组件 单页2、数据处理 单页三、项目使用--代码部分四、报错解决总结前言 使用vue-pdf组件实现文件预览功能 并在文件上...
    99+
    2022-11-13
  • H5如何实现手机端多文件上传预览插件
    这篇文章将为大家详细讲解有关H5如何实现手机端多文件上传预览插件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。基于zepto,支持多文件上传,进度和图片预览,用于手机端。...
    99+
    2022-10-19
  • Vue使用pdf-lib实现为文件流添加水印并预览
    目录1. 安装 2. 引入 3. 添加水印使用 3.1 添加文本水印3.2 添加图片文本3.3 封装previewPdf.js3.4 调用使用 ...
    99+
    2023-03-15
    Vue实现文件流添加水印 Vue文件添加水印 Vue添加水印
  • 一文详解如何在vue中实现文件预览功能
    目录文件流docx的预览pdf的预览xlsx预览图片的预览结语文件流 如何将各种文件的文件流(blob)转化为线上可以直接预览的数据,这里简单介绍四种不同类型的文件预览。分别是pdf...
    99+
    2022-11-13
    vue实现预览多种文件 vue文件预览功能 vue实现文件预览
  • Vue怎么使用pdf-lib实现为文件流添加水印并预览
    今天小编给大家分享一下Vue怎么使用pdf-lib实现为文件流添加水印并预览的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。首...
    99+
    2023-07-05
  • BootStrap Fileinput插件和Bootstrap table表格插件如何实现文件上传、预览、提交等功能
    这篇文章主要为大家展示了“BootStrap Fileinput插件和Bootstrap table表格插件如何实现文件上传、预览、提交等功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编...
    99+
    2022-10-19
  • 如何基于PHP实现微信小程序pdf文件的预览功能
    本篇文章给大家带来了关于PHP的相关知识,下面主要给大家介绍了关于如何基于PHP实现微信小程序pdf文件的预览功能,希望对大家有帮助。(推荐教程:PHP视频教程)问题描述前段时间文库类微信小程序开发中遇到个问题,就是要在小程序中预览阿里云O...
    99+
    2022-08-26
  • bootstrap中fileinput插件如何实现预览上传照片功能
    这篇文章将为大家详细讲解有关bootstrap中fileinput插件如何实现预览上传照片功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 效果图如下所示:&...
    99+
    2022-10-19
  • vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)
    目录前言一、预览word文件1.安装 npm 依赖2.预览在线地址文件3.预览本地文件二、预览excel表格1.安装依赖2.预览在线表格三、pdf预览1.安装依赖vue-pdf2.在...
    99+
    2022-11-13
  • 如何使用file标签实现多图文件上传预览
    这篇文章主要介绍如何使用file标签实现多图文件上传预览,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!js 代码:<script>   //下面用于多...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作