官方下载:
同目录下pdfjs-2.12.313-dist.zip为官方下载包
此包为pdf白色背景
 
使用中遇到问题:找不到viewer.html
解决方法:把里面的viewer copy出来扔到public或者static里面

static下pdfjs

上代码

<template>
<div class="pdfjs">
<iframe width="100%" frameborder="0" style="width: 100%; height: 100%;"
v-if ="src" :src="pdfSrc"></iframe>
</div>
</template> <script>
export default {
components: { },
data() {
return {
// 参数展示pdf地址
src: "https://aaeasy-file.newbanker.cn/pic/testforyuhan/裴士杰的专属报告_2021-11-02_11_17_21.pdf",
// pdfjs模板
viewerUrl: '/static/pdfjs/web/viewer.html',
pdfSrc: '',
};
},
methods: {
loadPDF() {
this.pdfSrc=`${this.viewerUrl}?file=${encodeURIComponent(this.src)}` },
},
mounted: function() {
this.loadPDF();
},
};
</script>
<style lang="scss" scoped>
.pdfjs {width:100%; height: 90vh;}
</style>

vue路由中pdfjs插件使用及找不到 viewer.html解决的更多相关文章

  1. 关于swift语言中导入OC三方类找不到头文件的解决方法

    首先我遇到的问题是这样的: 我之前封装的OC类,我导入现在的swift工程中,然后建立桥接文件,在Swift的控制器中可以找到这个OC写的东西. 但是问题来了,当你使用cocoapods导入的OC三方 ...

  2. vue路由中 Navigating to current location ("/router") is not allowed

    报错原因:多次点击同一路由,导致路由被多次添加 解决方法: router/index中添加以下代码: //router/index.js Vue.use(VueRouter) //导入vue路由 co ...

  3. 在IntelliJ IDEA中添加框架支持时找不到Hibernate的解决办法

    问题描述 第一次在Add Frameworks support界面中添加hibernate支持的时候,异常中断,导致没有成功添加. 第二次进入Add Frameworks support窗口时,发现找 ...

  4. vue项目中使用插件将字符串装化为格式化的json数据(可伸缩)

    插件地址:https://www.npmjs.com/package/vue-json-viewer 第一步:安装vue-json-viewer插件 $ npm install vue-json-vi ...

  5. vue路由中的 Meta

    在项目中肯定有这样的需求,那就是在某个页面的时候,顶部展示 现在当前的页面路径,如下图: 这个在vue中其实很好实现. 首先出现这个肯定是相对应不同的页面,也就是说对应不同的路由,我们在定义路由的时候 ...

  6. 如何去掉vue路由中的#

    通过脚手架vue-cli构建的项目,在项目启动后,URL地址上都会带有#,如:http://localhost:8080/#/father 原因:这是因为vue-router 默认hash模式, 使用 ...

  7. vue路由中使用keep-alive 以及activated和deactivated 钩子

    本次只是记录下开发中碰到的问题. 最近做一个活动页面,涉及到角色和权限的问题,需要跳转很多页面,于是vue-router走起,顺便keep-alive也用起来了,嗯,跳转的很爽,但是一个详情页面组件, ...

  8. 在vue项目中使用scss,以及vscode适配scss语法(解决使用scss语法编辑器报错)

    项目搭建好之后 安装sass 依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-d ...

  9. JAVA中ProcessBuilder执行cmd命令找不到路径的解决方法

    今天遇到了一个很奇葩的问题,终于解决了,记一下,以做备忘. 前提条件:工程路径在D盘下 cmd要执行的可执行文件路径不在D盘下 然后...出事了............................ ...

  10. 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

随机推荐

  1. C++编程笔记(QT)

    目录 入门基础 模态对话框 消息提示框(messagebox) 文件和目录 字体选择框 输入对话框 进度条 工具栏 控件布局 Windows托盘案例 控件 button 下拉菜单按钮 `radioBu ...

  2. 【JUC】循环屏障CyclicBarrier详解

    欢迎关注专栏[JAVA并发] 前言 jdk中提供了许多的并发工具类,大家可能比较熟悉的有CountDownLatch,主要用来阻塞一个线程运行,直到其他线程运行完毕.而jdk还有一个功能类似并发工具类 ...

  3. AIBOX视频边缘计算终端,助力识别人员违规行为!

    目前,制造业工厂工作区布局分散,生产安全质量控制难度较大.人员擅自离岗.玩手机.区域入侵.吸烟.未穿反光衣.异物占位等违法行为不能及时控制,安全风险十分巨大.如果手动检查或通过人眼检查监控录像,不仅产 ...

  4. flutter系列之:如丝般顺滑的SliverAppBar

    目录 简介 SliverAppBar详解 SliverAppBar的使用 总结 简介 对于一个APP来说,肯定会有一个AppBar,这个AppBar一般包含了APP的导航信息等.虽然我们可以用一个固定 ...

  5. Python实验报告(第7章)

    实验7:面向对象程序设计 一.实验目的和要求 1.了解面向对象的基本概念(对象.类.构造方法): 2.学会类的定义和使用: 3.掌握属性的创建和修改: 4.掌握继承的基本语法. 二.实验环境 软件版本 ...

  6. .Net6 使用 Ocelot + Consul 看这篇就够了

    前言 卯兔敲门,新的一年,祝大家前'兔'似锦!希望大家假后还能找到公司的大门 O(∩_∩)O !书接上文,我们使用了 Consul实现了服务注册与发现,对Consul不熟悉的同学可以先看看.这篇文章我 ...

  7. 【学习笔记】C/C++ 设计模式 - 观察者模式

    前言 估计 2020 年写应用程序的机会比较多,之前一直在做嵌入式驱动程序和Android系统定制方面的工作,在应用程序方面积累的不是很多,因此迫切需要多学学应用编程这方面的知识. 之前在写小的应用程 ...

  8. 【单片机】nRF52832 实现停止蓝牙广播接口

    前言 有一个项目使用了 nRF52832 芯片作为主控,其中有用到蓝牙功能.在对蓝牙接口进一步封装的时候,发现 SDK 居然没有停止广播的接口,咨询了代理 FAE,对方也没有找到关闭广播的接口.后来通 ...

  9. 《深入理解Java虚拟机》第三章读书笔记(三)——经典垃圾回收器

    系列文章目录和关于我 一丶概述 上图展示了 经典的垃圾回收器,其中Serial,ParNew,Parallel Scavenge(途中的Parallel) 作用在新生代Serial Old CMS,P ...

  10. 腾讯出品小程序自动化测试框架【Minium】系列(五)API详解(中)

    写在前面 又有好久没更新小程序自动化测试框架Minium系列文章了,主要真的太忙,尽量做到每周一更吧,还请大家能够理解! 上篇文章为大家分享关于Minium中Minium.App模块的API 使用,接 ...