README.md · yangcuncun/vue-pdf-view

# 在vue中预览pdf

## vue-pdf

### 安装[vue-pdf](https://www.npmjs.com/package/vue-pdf)

```bash
npm install --save vue-pdf
// 
yarn add vue-pdf
```

### 使用

#### 不分页

```vue
<template>
  <div>
    <pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i">
    </pdf>
  </div>
</template>

mounted () {
    this.pdfTask(this.src)
  },
  methods: {
    pdfTask (src) {
      var self = this
      var loadingTask = pdf.createLoadingTask(src)
      loadingTask.promise.then(pdf => {
        self.pdfUrl = loadingTask
        self.numPages = pdf.numPages
      }).catch((err) => {
        console.error('pdf加载失败')
      })
    }
  }
}

</script>

```

#### 分页

```vue
<template>
  <div>
    <pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i">
    </pdf>
  </div>
</template>

</script>
```

## pdfjs

### 下载

[pdf js 官网](https://mozilla.github.io/pdf.js/getting_started/#download)

### 使用

#### 将下载后的文件放到服务器上

如: http://192.168.0.26:9999/pdfView/

```vue
<template>
  <div class="pdf_page">
    <iframe width="100%" height="800" scrolling="no" :src="url"></iframe>
  </div>
</template>

#### 将下载后的文件放到public文件里

```vue
<template>
  <div>
    <iframe width="100%" height="800" scrolling="no" :src="url"></iframe>
  </div>
</template>

# 仓库

- gitee: https://gitee.com/denghuoan/vue-pdf-view
- github: https://github.com/denghuoan/vue-pdf-view

- csdn博文: https://blog.csdn.net/denghuocc/article/details/109361877

yangcuncun/vue-pdf-view

简介

发行版

贡献者

近期动态

yangcuncun/vue-pdf-view .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

yangcuncun/vue-pdf-view