官方下载:
同目录下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. 【数据库】在公司开发过程中总结的SQL编写规范,参考开发手册

    〇.概述 1.常用资料链接 (1)阿里巴巴开发手册 链接:https://pan.baidu.com/s/1OtOFuItDIP7nchfODGIZwg?pwd=htx0 提取码:htx0 2.包含内 ...

  2. 【SQL进阶】【表默认值、自增、修改表列名、列顺序】Day02:表与索引操作

    一.表的创建.修改与删除 1.创建一张新表 [设置日期默认值.设置id自增] [注意有备注添加备注COMMENT] CREATE TABLE user_info_vip( id int(11) pri ...

  3. 【每日一题】【快慢指针相遇】2022年1月25日-NC3 链表中环的入口结点

    描述给一个长度为n链表,若其中包含环,请找出该链表的环的入口结点,否则,返回null. 答案: /* public class ListNode { int val; ListNode next = ...

  4. 大数据-业务数据采集-FlinkCDC

    CDC CDC 是 Change Data Capture(变更数据获取)的简称.核心思想是,监测并捕获数据库的变动(包括数据或数据表的插入.更新以及删除等),将这些变更按发生的顺序完整记录下来,写入 ...

  5. YonBuilder移动开发平台功能大盘点

    YonBuilder是面向企业组织和个人开发者的低代码开发平台,实现无代码.低代码.专业代码开发三种模式.提供元数据驱动和画布构建两种开发方式,通过点击拖拽+自动化代码生成和移动多端编译的技术,与开放 ...

  6. Ajax---EventLoop事件循环

    前言       JavaScript 是一门单线程执行的脚本语言.也就是说,同一时间只能做一件事情. JavaScript要运行在宿主环境中(浏览器,nodejs)下.浏览器内部有执行js代码的引擎 ...

  7. 比Sqoop功能更加强大开源数据同步工具DataX实战

    @ 目录 概述 定义 与Sqoop对比 框架设计 支持插件 核心架构 核心优势 部署 基础环境 安装 从stream读取数据并打印到控制台 读取MySQL写入HDFS 读取HDFS写入MySQL 执行 ...

  8. [常用工具] shell脚本快速入门笔记

    Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 脚本(shell script),是一种为 shell 编写的脚本程序.业界所说的 shell 通常都是指 sh ...

  9. [python] 基于matplotlib实现雷达图的绘制

    雷达图(也称为蜘蛛图或星形图)是一种可视化视图,用于使用一致的比例尺显示三个或更多维度上的多元数据.并非每个人都是雷达图的忠实拥护者,但我认为雷达图能够以视觉上吸引人的方式比较不同类别各个特征的值.本 ...

  10. [编程基础] Python装饰器入门总结

    Python装饰器教程展示了如何在Python中使用装饰器基本功能. 文章目录 1 使用教程 1.1 Python装饰器简单示例 1.2 带@符号的Python装饰器 1.3 用参数修饰函数 1.4 ...