Vue项目中使用基于pdf.js的vue-pdf插件在pc浏览器下阅览PDF文件

栏目: 编程语言 · 发布时间: 5年前

内容简介:最近项目中需求为在浏览器上阅览PDF格式的文件,之前没有写过,随即上网查阅,发现大家常使用的为两个插件。其一是火狐出品的pdf.js,github地址:其二是PDFObject,额,不太清楚作者,github地址:

最近项目中需求为在浏览器上阅览PDF格式的文件,之前没有写过,随即上网查阅,发现大家常使用的为两个插件。

其一是火狐出品的pdf.js,github地址: https://github.com/mozilla/pd... ;

其二是PDFObject,额,不太清楚作者,github地址: https://github.com/pipwerks/P...

前者功能强大,社区活跃,后者是基于jquery封装出来的插件,要是在vue中混着jquery总感觉怪怪的,所以我选择了前者。

又看了一下有没有轮子可用,诶嘿,vue-pdf,github地址: https://github.com/FranckFrei... 。看了文档,可取。

首先下载插件(建议先新建一个demo出来跑,直接撸到开发项目中...出什么幺蛾子...)

// 我使用的是yarn npm的话 npm install vue-pdf --dev
yarn add vue-pdf --dev

然后在vue文件中引入使用,建议新建一个vue文件二次封装

<template>
  <div class="pdf-container">
    <pdf :src="pdfUrl"/>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'VuePdf',
  components: { pdf },
  data() {
    return {
      // 此处为示例pdf地址
      pdfUrl: 'http://image.cache.timepack.cn/nodejs.pdf'
    }
  }
}
</script>

之后就可以愉快的玩耍了。

不过我迁移到公司项目的时候遇到一个坑,引入这个插件的时候就会报错window is not defined,后来查询资料发现这篇文章,问题才得已解决,感谢作者。 https://blog.csdn.net/u010745...

只需要在webpack中设置如下

module.exports = {
  // 请忽视这无关的代码
  output: {
    globalObject: "this"
  }
  // 请忽视这无关的代码
}

以上。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PERL學習手札.

PERL學習手札.

簡信昌 / 上奇科技 / 20040816 / NT$ 390

1. 關於Perl 當你翻開這本書的時候,你也就進入了一個奇幻的世界。Perl確實是一種非常吸引人的程式語言,而之所以這麼引人入勝的原因不單單在於他的功能,也在於他寫作的方式,或說成為一種程式寫作的藝術。即使你只是每天埋首於程式寫作的程式設計師,也不再讓生活過份單調,至少你可以嘗試在程式碼中多一些變化。而且許多Perl的程式設計師已經這麼作了,這也是Perl的理念-「There is mor......一起来看看 《PERL學習手札.》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

html转js在线工具
html转js在线工具

html转js在线工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具