vue项目中实现预览pdf

vue项目中实现预览pdf

1. iframe

​
 data() {
    return {
      pdfSrc: 'http://192.168.0.254:19000/trend/2023/12/27/5635529375174c7798b5fabc22cbec45.pdf',
    }
  },
      
​
  iframe {
    width: 100%;
    height: calc(100vh - 132px - 2 * 20px - 160px);
  }

2. vue-pdf

npm i vue-pdf --save-dev

​

​

参考：解决vue-pdf默认只展示第一页的问题

使用vue-pdf展示静态PDF文件的时候（在线PDF可使用embed标签查看），常规操作之后发现只能加载第一页PDF，以下是解决方案：
​
vue-pdf使用过程如下：
​
$ yarn add vue-pdf
or
$ npm install vue-pdf
​
​
在组件中使用：


​
这个时候，多页的PDF只会显示第一页，这时各位可以去查看一下vue-pdf的源码，我们可以发现，它的实现过程是将PDF按页绘制在canvas上的，其页码数oage默认值是1，展示第一页的canvas。所以我们主要使用两种方式处理。
​
第一种是使用v-for循环加载所有页面：


这个时候，多页的PDF只会显示第一页，这时各位可以去查看一下vue-pdf的源码，我们可以发现，它的实现过程是将PDF按页绘制在canvas上的，其页码数oage默认值是1，展示第一页的canvas。所以我们主要使用两种方式处理。
​
第一种是使用v-for循环加载所有页面：
​

 

这样有一个问题就是如果页数非常多，加载会很慢。
​
第二张是采用分页的形式：


​

​
​
二、