前端实现pdf预览

这篇具有很好参考价值的文章主要介绍了前端实现pdf预览。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:项目中之前pdf预览是客户端andrio实现的,现在需要前端H5自己实现预览功能,项目是基于vue的H5项目,记录一下pdf预览功能实现的过程和问题

一、利用iframe实现pdf预览

1、实现过程

将pdf路径设置给iframe的src属性

    <iframe :src="pdfUrl" marginWidth="0" marginHeight="0" scrolling="no" frameBorder="0" style="width: calc(100% + 17px); height: calc(100% + 17px)"></iframe>
create(){
//路由路径上获取pdf路径参数
 var extension = this.$route.query.pdfSrc.split('.').pop().toLowerCase()
    console.log(extension, 'extensionextension')
    if (extension == 'pdf') {
      this.pdfSrc = `${this.$route.query.pdfSrc}#toolbar=0`
    } else {
      this.pdfSrc = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc
    }

}

2、遇到的问题

电脑上测试正常,但是安卓端会出现空白页和直接跳转下载的现象,解决思路:客户端同事推荐用pdf.js,然后在网上查找发现,vue有一个插件vue-pdf,是基于pdf.js封住的,因此决定采用插件vue-pdf实现

二、vue-pdf插件实现预览

1、实现过程

下包

npm i vue-pdf

引入并使用

<template>
  <div class="pdf-container">
    <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  data () {
    return {
      pdfSrc: '',
      numPages: null
    }
  },
  components: {
    pdf
  },
  computed: {},
  created () {
      var extension = this.$route.query.pdfSrc.split('.').pop().toLowerCase()
    if (extension == 'pdf') {
      this.pdfSrc = `${this.$route.query.pdfSrc}#toolbar=0`
    } else {
      this.pdfSrc = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc
    }
    }
  },
  mounted () {
    this.getNumPages()
  },

  methods: {
    getNumPages () {
      const loadingTask = pdf.createLoadingTask(this.pdfSrc)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
        console.log(' this.numPages', this.numPages)
      }).catch(err => {
        debugger
        console.error('pdf 加载失败', err)
      })
    }

  }
}
</script>

 部署到测试线app中测试还是存在空白页问题,于是换成插件pdfH5

三、pdfH5实现预览

下包

npm i pdfh5

代码实现

<template>
  <div class="pdf-container">
    <div id="pdf-content"></div>
    <iframe v-if="docType!='pdf'" :src="pdfUrl" marginWidth="0" marginHeight="0" scrolling="no" frameBorder="0" style="width: calc(100% + 17px); height: calc(100% + 17px)"></iframe>
  </div>
</template>
<script>
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
export default {
  name: 'Pdfh5',
  data () {
    return {
      docType: '',
      pdfh5: null,
      // 可引入网络文件或者本地文件
      pdfUrl: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf' // 如果引入本地pdf文件,需要将pdf放在public文件夹下,引用时使用绝对路径(/:表示public文件夹)
    }
  },
  mounted () {
    this.docType = this.$route.query.pdfSrc.split('.').pop().toLowerCase()
    if (this.docType == 'pdf') {
      this.initPdf()
    } else {
      this.pdfUrl = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc
    }
  },
  methods: {
    initPdf () {
      // pdfh5实例化时传两个参数:selector选择器,options配置项参数,会返回一个pdfh5实例对象,可以用来操作pdf,监听相关事件
      // pdfh5 = new Pdfh5(selector, options) goto初始到第几页,logo设置每一页pdf上的水印
      this.pdfh5 = new Pdfh5('#pdf-content', {
        pdfurl: this.$route.query.pdfSrc,
        goto: 1
        // 设置每一页pdf上的水印
        // logo: { src: require('@/assets/images/bus/icon_head@2x.png'), x: 420, y: 700, width: 120, height: 120 }
      })
      this.pdfh5.scrollEnable(true) // 允许pdf滚动
      // 监听pdf准备开始渲染,此时可以拿到pdf总页数
      this.pdfh5.on('ready', function () {
        console.log('总页数:' + this.totalNum)
      })
      // 监听pdf加载完成事件,加载失败、渲染成功都会触发
      this.pdfh5.on('complete', (status, msg, time) => {
        console.log('状态:' + status + ',信息:' + msg + ',耗时:' + time + '毫秒')
      })
    }
  }
}
</script>
<style  scoped>
.pdfjs {
  height: 100vh !important;
}
.pdf-container {
  width: 100%;
  height: 100%;
}

</style>

最终测试,该方案可以。文章来源地址https://www.toymoban.com/news/detail-649123.html

到了这里,关于前端实现pdf预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue2中的pdf预览】iframe/pdf.js/vue-pdf

    vue2中预览pdf的方法有pdf.js和vue-pdf等。下面进行简单对比使用方法的介绍。 使用iframe预览pdf 如果后端返回的不是url,那么需要使用 responseType = \\\'blob\\\' 来读取后端传来的内容。 扩展: 同样是使用iframe进行预览,如果有 其他格式 如word/xls/ppt/txt的文件需要预览,可以使用微软解

    2024年02月09日
    浏览(53)
  • 前端实现pdf预览

    前言:项目中之前pdf预览是客户端andrio实现的,现在需要前端H5自己实现预览功能,项目是基于vue的H5项目,记录一下pdf预览功能实现的过程和问题 一、利用iframe实现pdf预览 1、实现过程 将pdf路径设置给iframe的src属性 2、遇到的问题 电脑上测试正常,但是安卓端会出现空白页

    2024年02月13日
    浏览(33)
  • 前端实现PDF预览【vue】

    前言:项目中提出这样一个需求,在移动端H5页面预览pdf功能。pdf文件由后端返回的一个地址,前端实现展示预览pdf文件 在此仅提供两种方法: 一、使用iframe标签通过src属性直接展示pdf文件         坑点:兼容比较差,PC端能正常展示,移动端会出现空白的问题 二、使用第

    2024年01月16日
    浏览(52)
  • 前端实现 PDF 预览的常见方案

    由于在搭建个人博客时,想实现在线预览 pdf 格式的个人简历,经过查阅大致有三大类实现方案;本文共涉及以下 5 种实现方案,如下所示: 使用 HTML 标签 iframe 标签 embed 标签 object 标签 使用第三方插件 PDF.js PDFObject PDF 文件转化成图片进行展示 第一类方案: 使用 HTML 标签

    2024年01月20日
    浏览(53)
  • 前端实现pdf,图片,word文件预览

    需求:实现一个在线预览pdf、excel、word、图片等文件的功能。 介绍:支持pdf、xlsx、docx、jpg、png、jpeg。 以下使用Vue3代码实现所有功能,建议以下的预览文件标签可以在外层包裹一层弹窗。 iframe标签能够将另一个HTML页面嵌入到当前页面中,我们的图片也能够使用iframe标签来

    2024年02月11日
    浏览(54)
  • 前端实现PDF预览:简单而高效的方法

    PDF是一种常用的文件格式,但在网页中直接预览PDF文件可能会带来一些挑战。本文将介绍一种简单而高效的前端方法,以实现PDF文件的预览。 最简单的方法是使用iframe标签来嵌入PDF文件。代码如下所示: 上述代码通过设置iframe的src属性为PDF文件的路径,将PDF文件嵌入到网页

    2024年02月05日
    浏览(47)
  • 前端实现文件预览(pdf、excel、word、图片)

    需求:实现一个在线预览pdf、excel、word、图片等文件的功能。 介绍:支持pdf、xlsx、docx、jpg、png、jpeg。 以下使用Vue3代码实现所有功能,建议以下的预览文件标签可以在外层包裹一层弹窗。 sandbox 这个属性如果是单纯预览图片可以不使用,该属性对呈现在 iframe 框架中的内容

    2024年02月10日
    浏览(59)
  • vue 纯前端预览pdf,纯前端实现pdf加水印下载文件也带水印,防止pdf下载

      原理:主要是利用pdfh5这个插件来完成的   使用方法:   1.页面需要有一个容器例子:div id=\\\"demo\\\"/div   2.下载pdfh5插件 npm install pdfh5   (注意:webpack5之后不会下载polyfill 需要手动下载 所以引入pdfh5的时候会报错)   解决方案:下载 node-polyfill-webpack-plugin npm install node-polyfill-

    2024年04月15日
    浏览(65)
  • 记录--前端实现文件预览(pdf、excel、word、图片)

    需求:实现一个在线预览pdf、excel、word、图片等文件的功能。 介绍:支持pdf、xlsx、docx、jpg、png、jpeg。 以下使用Vue3代码实现所有功能,建议以下的预览文件标签可以在外层包裹一层弹窗。 iframe标签能够将另一个HTML页面嵌入到当前页面中,我们的图片也能够使用iframe标签来

    2024年02月09日
    浏览(63)
  • vue中前端实现pdf预览(含vue-pdf插件用法)

      场景:前端需要根据后端返回的线上pdf的地址,实现pdf的预览功能。 情况一:后端返回的pdf地址,粘贴到浏览器的url框中,是可以在浏览器中直接进行预览的。 方法(1)可以直接使用window.open(\\\'获取到的pdf地址\\\')重新打开一个浏览器页签,通过浏览器页签直接实现预览功

    2024年02月04日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包