利用pdfjs在线显示pdf文件

1、下载pdf.js插件:https://gitee.com/liuhaipeng1130/pdfjs

2、创建Vue项目

将下载好的pdf.js插件放在static文下
在这里插入图片描述

3、新建一个pdf页面
用’iframe’标签来嵌套,完成一个简单的pdf在线预览
这里路径可以拆分为“ …/…/static/pdf/web/viewer.html”pdfjs的展示页面 + pdf文件的路径

<template>
  <div class="wrap">
    <iframe :src="url" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
export default {
  name: "pdf",
  data() {
    return {
      url:'../../static/pdf/web/viewer.html?file= + pdf文件路径 ',
    };
  },
};
</script>

<style scoped>
.wrap{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
}
</style>

运行成功如图
在这里插入图片描述

出现的问题

运行后如果显示下面错误
在这里插入图片描述

解决方案
在viewer.js里面的代码
在这里插入图片描述
将之注释,如图
在这里插入图片描述
再次运行即可


版权声明:本文为weixin_52418790原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。