vue中使用Vue-pdf在线预览

悠悠 2021-09-07 08:40 746阅读 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 条评论，746人围观）

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

相关阅读

相关 PDF在线预览笔记

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

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

相关在Vue中实现PDF预览和下载

在Vue中实现PDF预览和下载可以通过引入PDF.js库来实现。PDF.js是一个使用JavaScript编写的开源PDF查看器，可以在Web浏览器中显示PDF文档。步骤

矫情吗；*/ 2023年09月25日 23:33/ 0 赞/ 157 阅读

相关 vue图片预览

vue结合vant实现图片视频预览 1. 给图片或视频添加点击事件 <div class="comment_image_box_list" v-for="(im

蔚落/ 2023年07月18日 02:48/ 0 赞/ 115 阅读

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

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

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

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

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

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

相关 vue 预览pdf

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

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

相关 office ppt在线预览

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

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

相关 Office Online 在线预览

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

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

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

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

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

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

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

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