vue使用pdf.js预览pdf文件

最新推荐文章于 2024-08-23 15:03:56 发布

哎一古哎一古

最新推荐文章于 2024-08-23 15:03:56 发布

阅读量2.1k

点赞数 1

文章标签： javascript vue.js pdf

本文链接：https://blog.csdn.net/weixin_46044574/article/details/131823596

版权

问题：有的pdf文件，客户的摘录显示不出来
1,下载所需要的pdf.js
引入pdf.js文件
地址：http://mozilla.github.io/pdf.js/getting_started/
在这里插入图片描述
2，vue引入，我放在了public/static下

3，使用
（1）新建一个pdf.vue文件，代码如下

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

<script>
export default {
	data(){
    return {
      title:'PDF预览'
    }
  },
  computed:{
    url(){
      let { pdfurl } = this.$route.query
      const host = './static/pdf/web/viewer.html?file=';
      return  host + encodeURIComponent(pdfurl)
    }
  },
 }
</script>

注：不想显示的东西在web/viewer.html中注释掉，直接删除会报错。
特别重要的一点
这样的代码在本地跑是没有问题的，但是线上环境可能会报错，找不到UniGB-UCS2-H.bcmap文件，明明文件中有，却找不到，因为他是特殊的文件
1、首先确保你本地cmaps文件夹中对应的UniGB-UCS2-H.bcmap
2、确保你的UniGB-UCS2-H.bcmap，能通过浏览器访问到。也就是说你的pdf所在网站需要添加对.bcmap文件的MIME描述，确保它能正常被打开
3、确保web/locale/locale.properties路径下的文件能够被浏览器访问到。同上需要添加对.properties文件的MIME描述，确保它能正常被打开