vue 预览pdf 的几种方式

显示效果：

1647068793(1).png

1、 embed

 <embed
      src="http://192.168.220.148:8081/api/admin/sys-file/show/micro-minio/19714f738a0149519c633e7576b1dccf.pdf#page=2"
      type="application/pdf"
      width="100%"
      height="100%"
    />

page 可以设置显示第几页，toolbar 1|0 显示|隐藏工具栏

2、object

···
<object
width="100%"
height="100%"
type="application/pdf"
data="http://192.168.220.148:8081/api/admin/sys-file/show/micro-minio/19714f738a0149519c633e7576b1dccf.pdf#page=2"
>
</object>
···

page 可以设置显示第几页，toolbar 1|0 显示|隐藏工具栏

3、iframe

<iframe
      width="100%"
      height="100%"
      src="http://192.168.220.148:8081/api/admin/sys-file/show/micro-minio/19714f738a0149519c633e7576b1dccf.pdf#page=2"
      frameborder="0"
    ></iframe>

page 可以设置显示第几页，toolbar 1|0 显示|隐藏工具栏

4、使用pdfObject.js

1,vue 先安装pdfObject

npm i pdfobject

2,引入pdfObjecr

import pdf from 'pdfobject'

3 应用

 pdf.embed('http://192.168.220.148:8081/api/admin/sys-file/show/micro-minio/19714f738a0149519c633e7576b1dccf.pdf', { page: 2 });