Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

2024-10-19 01:26:56

前言

最近在做一个精品课程，需要在线预览课件ppt，我们的思路是将ppt转换为pdf在线预览，所以问题就是如何实现在线预览pdf了。

在实现的过程中，为了更好地显示效果，我采用了多种不同的方法，最终选择效果最好的pdf.js。

实现方法：

1：iframe

采取iframe将pdf嵌入网页从而达到预览效果，想法很美好，实现很简单，但显示很残酷…

虽然一行代码简洁明了，打开谷歌浏览器效果也还行，但缺点也是十分明显的！！！！

<iframe src="http......" width="100%"></iframe>

缺点：

（1）不兼容IE，因为iframe毕竟不规范，IE已经不采用它了

（2）下载弹窗！！！每次打开预览都弹出下载弹窗，用户体验极度不好

2：embed

embed和iframe感觉差不多的东西，用起来感觉一样简洁明了，打开IE效果也还行，但仍然无法避免下载弹窗的干扰。

 <embed src="http......" width="100%" height="400" />

3：pdf.js（效果感觉最好）

实现步骤：

（1）下载pdf.js文件

因为pdf.js文件比较多，我们要用的只是核心文件，所以将核心文件抽出来（已处理跨域报错）。点击下载核心文件

（2）在static中引入核心文件

（3）使用

<template>
	<iframe :src="pathUrl" width="100%"></iframe>
</template>

<script>
export default {
	data () {
	   return {
	     pathUrl:''
	   }
	 },
	 mounted () {
      this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + encodeURIComponent('https://lidn02.o%BA.pdf')   // 找到之前引进来pdf文件中的的viewe.html并+pdf地址
    },
 }
</script>

（4）效果
各大主流浏览器均兼容。

（5）以流的形式接收pdf

虽然上面已经实现效果了，但打开控制台还是有一行报错：

为了解决这个问题，或者遇到跨域时都采用流的形式接受pdf文件，再进行展示：

mounted(){
	this.getData(你的pdf地址)
}

//接收文件流转换地址再显示
 getData(url){
  axios.get(url,{
    responseType:'blob',
  })
    .then(res => {
      let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
      let objectUrl = URL.createObjectURL(blob)
      this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + objectUrl
    })
    .catch(err => {
      console.log(err)
    })
}

总结

到此这篇关于Vue实现在线预览pdf文件功能的文章就介绍到这了,更多相关Vue在线预览pdf文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue 使用 vue-pdf 实现pdf在线预览的示例代码

背景之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了.本篇笔记循序渐进,从基础的demo,到一个可用的程度,文末列出
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

实现效果可用插件介绍 Mozilla 提供了 PDF.js和pdfjs-dist,两者的区别如下: PDF.js ,一个完整的 PDF 查看器,可以直接使用其提供的 viewer.html 查看 PDF 内容,包含完整样式和相关功能.优点是快速集成,不需要自己实现查看器的功能和样式.缺点是如果要自定义样式和功能,反而会很麻烦. pdfjs-dist ,PDF.js 的预购建版本,只包含 PDF 内容的渲染功能,需要自己实现查看器的样式和相关功能. Vue 官方插件库 Awesome Vue.j
vue实现pdf文档在线预览功能

针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下一.引入插件方式一:npm install --save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除,如图方式三:将插件直接放在static文件夹下,如图二.前端页面代码方式一和方式二:特点精简 <template> <div> <c
Vue-pdf实现在线预览PDF文件

前言在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现. 安装依赖 npm install --save vue-pdf 相关参数参数介绍: url :pdf 文件的路径,可以是本地路径,也可以是在线路径. page: 当前显示的页数,比如第一页page=1 rotate : 旋转角度,比如0就是不旋转,+90,-90 就是水平旋转. progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了. page-
Vue+ElementUI使用vue-pdf实现预览功能

Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应的组件我这是通过点击预览按钮获取id打开一个dialog来实现  <el-dialog :title="PDF 预览" :visible.sync="viewVisible" width="80%"
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的pdf.js插件来实现. pdf.js可以从github上clone下来,然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可). 不过更简单的方法是使用cnpm来安装: cnpm isntall --save pdfjs-dist,然后可以在项目中使用了,
vue中如何实现pdf文件预览的方法

今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe.embed.vueshowpdf(测试了不咋好用).pdf等,本文说一下pdf插件的使用过程. 说明:iframe标签这种,对于有的链接是可以的,比如这种链接在服务器端没有设置享有头content-disposition,就可以直接显示,如下: 想复制代码如下: <iframe
vue实现在线预览pdf文件和下载（pdf.js）

最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件下载路径: pdf.js (2)将下载构建后的插件放到文件中public(vue/cli 3.0) (3)在vue文件中直接使用,贴上完整代码 <template> <div class="wrap"> <iframe :src=
vue实现在线预览office文件的示例代码

最近在做电子档案,后端提供了文件的华为云的oss链接.已经实现了点击下载文件的功能.但是呢,他们又希望常规的文件,可以直接点击预览,不需要下载. 按道理说,做文件的在线预览,买个第三方服务什么的,后端部署一下服务,前端对接一下,就通通搞定. 顶不住第三方基本上是要money的.那不想掏money,还有什么解决方法呢. 方法一用微软的office online进行在线预览 https://view.officeapps.live.com/op/view.aspx?src=文件地址例:https
Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

前言最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了. 在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf.js. 实现方法: 1:iframe 采取iframe将pdf嵌入网页从而达到预览效果,想法很美好,实现很简单,但显示很残酷- 虽然一行代码简洁明了,打开谷歌浏览器效果也还行,但缺点也是十分明显的!!!! <iframe src="http......" widt
vue在线预览word、excel、pdf、txt、图片的方法实例

目录 excel文件预览 word文件预览 pdf文件预览一.查看word 引用mammoth.js 二.查看Excel 引用sheetjs 写的项目 1.页面 2.数据补充:vue移动端实现word在线预览总结 excel文件预览 word文件预览 pdf文件预览一.查看word 引用mammoth.js 安装 npm install --save mammoth 引入import mammoth from “mammoth”; 1.页面 <div id="wordView&qu
Vue中如何实现在线预览word文件、excel文件

目录实现效果一.查看word 1.引用mammoth.js 2. 页面布局 3. 请求URL显示数据二.查看Excel 1.引用sheetjs 2.页面布局 3.请求URL显示数据三.项目应用:根据详情后缀分情况显示word.excel 1. 效果展示 2. 页面布局 3.调用函数展示数据实现效果一.查看word 1.引用mammoth.js (1)安装 npm install --save mammoth npm install --save mammoth (2)引入import
SpringBoot实现PPT格式文件上传并在线预览功能

1.需要引入依赖 <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf</artifactId> <version>5.5.9</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId&
直接在线预览Word、Excel、TXT文件之ASP.NET

具体实现过程不多说了,直接贴代码了. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Microsoft.Office.Interop.Excel; using System.Diagnostics; using System.IO; using Microsoft.Office.Interop.Word; namesp
Vue实现docx、pdf格式文件在线预览功能

目录介绍 docx 安装使用 PDF 安装引入和使用 pdf的放大和缩小多格式的文件渲染函数映射不支持的文件提示处理总结介绍在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预览功能,并将其封装成preview组件 docx docx的实现需要使用docx-preview插件安装 npm i docx-preview 使用创建一个容器标签 <div ref="file" v-show="extend =
vue3如何实现PDF文件在线预览功能

目录概述正文创建 vue3 项目添加 PDF 预览插件总结概述之前我们用 Reactjs + React-PDF 实现了 React 版的 PDF 文件预览,今天我们用 Vue3 + Vue-PDF 实现 Vue 版本的 PDF 文件在线预览功能. 我们先来看看完成后效果正文创建 vue3 项目我们先创建一个的 Vue3 项目, 在终端中输入命令 pnpm create vite vue-pdf-preview 选择 vue-ts 回车,cd 进入项目根目录,执行 pnpm

Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

前言

实现方法：

总结

相关推荐

随机推荐