在VUE项目中使用pdf.js+iframe实现pdf文件预览

最新推荐文章于 2024-06-14 15:41:51 发布

K1nney

最新推荐文章于 2024-06-14 15:41:51 发布

阅读量1.6k

点赞数 1

文章标签： pdf.js

本文链接：https://blog.csdn.net/wkw1598727534/article/details/125747960

版权

1.https://mozilla.github.io/pdf.js/getting_started/#download下载pdf.js，放在项目public文件中。
在这里插入图片描述
2.demo如下，其中encodeURIComponent(）方法参数为pdf在服务器中存放位置的url。

<template>
  <div>
    <basic-container>

      <el-dialog title="PDF 预览" :visible.sync="viewVisible" width="70%" center>
        <template>
          <iframe class="prism-player" :src="pdfUrl" width="100%" height="800px"></iframe>
        </template>
      </el-dialog>

    </basic-container>
  </div>
</template>


<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl: '/pdf/web/viewer.html?file=' + encodeURIComponent('http://localhost:8080/upload/20220318/serverStartup.pdf'), // pdf文件地址
      viewVisible:true,
    };
  },
};
</script>