vue中使用Vue-pdf在线预览

悠悠 2021-09-07 08:40 645阅读 0赞

### 下载 ###

npm i vue-pdf

引入(在所需要预览的页面)

<script>
    
    import axios from 'axios'
    
    import pdf from 'vue-pdf'
    
    import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' // 加载中文的包
    
    export default {
    
      components: {
    
        pdf
    
      },
    
      data () {
    
        return {
    
          numPages:''，
    
           url:''，
    
           src:''，
    
           path:'',//pdf的地址，例如：/testFile.pdf
    
        }
    
      },
    
      created(){
    
        this.url = axios.defaults.baseURL; // 项目当前的域名
    
        this.src = pdf.createLoadingTask({
    
          // url:'http://localhost:8080'+this.path,// 此行是为了在本地跑项目的时候能够加载出来，仅用于开发显示
    
          url:this.url+this.path,//正式环境用这个！
    
          CMapReaderFactory
    
        })
    
        // 让所有页数一次性加载完，否则就只会加载第一页
    
        this.src.then(pdf => {
    
          this.numPages = pdf.numPages
    
          }).catch(() => {
    
        })
    
      },
    
    }
    
    </script>

this.url一定要是当前项目的域名，否则会报跨域，请确保this.url+this.path是能够在浏览器访问的

例如：[http://test.com/testFile.pdf][http_test.com_testFile.pdf]

html部分

<template>
    
        <div class="scrollBox">
    
          <div v-for="i in numPages" :key="i">
    
            <pdf :src="src" :page="i"></pdf>
    
          </div>
    
        </div>
    
      </div>
    
    </template>

若只写<pdf :src="src"></pdf>，仅加载第一页

[http_test.com_testFile.pdf]: https://links.jianshu.com/go?to=http%3A%2F%2Ftest.com%2FtestFile.pdf

发表评论取消回复

表情：

评论列表（有 0 条评论，645人围观）

还没有评论，来说两句吧...

相关阅读

相关文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览

关于实现文档在线预览的做法，之前文章提到了的两种实现方式： 1、通过将文档转成图片：详见[《文档在线预览（一）通过将txt、word、pdf转成图片实现在线预览功能》][tx

「爱情、让人受尽委屈。」/ 2024年03月16日 15:58/ 0 赞/ 62 阅读

相关 PDF在线预览笔记

[Office在线预览及PDF在线预览的实现方式大集合][Office_PDF] [\[js学习笔记\]PDF.js专题][js_PDF.js] [Office_PDF]

秒速五厘米/ 2024年02月19日 13:10/ 0 赞/ 50 阅读

相关 vue word预览，excel预览，pdf预览

一、word预览–mammoth.js 安装：`npm install --save mammoth` tip：只能预览.docx文件 word.vue:

淩亂°似流年/ 2022年11月15日 11:13/ 0 赞/ 670 阅读

相关 VUE 实现高性能的 PDF 在线预览

[https://www.toutiao.com/i6868246532873781764/][https_www.toutiao.com_i68682465328737817

古城微笑少年丶/ 2022年10月29日 01:47/ 0 赞/ 287 阅读

相关 vue 预览pdf

<embed :src="previewSrc" type="application/pdf" width="1200px"

偏执的太偏执、/ 2022年10月05日 09:45/ 0 赞/ 429 阅读

相关文档预览服务器,特色 - I Doc View在线文档预览

使用对象个人和第三方应用均可使用：个人：可以在示例页面上传和预览文档第三方应用：通过我们提供的第三方应用API接口来调用，或者将预览服务部署到您自己的服务器上。预览

蔚落/ 2022年09月04日 04:44/ 0 赞/ 254 阅读

相关 office ppt在线预览

我项目中是直接用iframe显示： <iframe id="iframe\_src" scrolling="auto" width="100%" height="800

悠悠/ 2022年04月23日 13:52/ 0 赞/ 420 阅读

相关 Office Online 在线预览

首先，office的在线预览无疑问是在不用下载的前提下通过浏览器直接进行浏览，所以针对浏览器的版本不同系统是有要求的，具体的浏览器支持情况可以查看官方提供的文档：点我查看利

旧城等待，/ 2022年04月04日 19:16/ 0 赞/ 1206 阅读

相关 Vue中如何在线预览pdf文件

某次项目的需求中要实现pdf文件的在线预览，百度了很多个实现pdf在线预览的功能，感觉看起来都是比较费劲，可能自己比较菜吧，但是总结了一下可以实现这种结果的是pdf.js 可

秒速五厘米/ 2022年03月14日 13:30/ 0 赞/ 732 阅读

相关 vue中使用Vue-pdf在线预览

下载 npm i vue-pdf 引入(在所需要预览的页面) <script> import axios from 'axios'

悠悠/ 2021年09月07日 08:40/ 0 赞/ 646 阅读