vue或uniapp使用pdf.js预览

news2024/9/24 11:28:27

一、先下载稳定版的pdf.js,可以去官网下载  官网下载地址  或  pdf.js包下载(已配置好,无需修改)

二、下载好的pdf.js文件放在public下静态文件里, uniapp是放在 static下静态文件里

三、使用方式

   1. vue项目 注意路径 :src="`static/pdfjs-1.9/web/viewer.html?file=你的pdf路径
<iframe :src="`static/pdfjs-1.9/web/viewer.html?file=https://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf`" style="border:none;" width="1000" height="100%"></iframe>
 2. uniapp项目使用 注意路径  /static/PDFVIEW/pdfjs-1.9/web/viewer.html
<template>
    <view style="width: 100vh;">
        <web-view :src="pdfUrl" :fullscreen="true"></web-view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            pdfUrl: '',
            htmlUrl: '/static/PDFVIEW/pdfjs-1.9/web/viewer.html', //新测试预览
     fileUrl:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',  
        }
    },
    onLoad(options) {
        this.pdfUrl = `${this.htmlUrl}?file=${this.fileUrl}`;
    }
}
</script>

四、控制台会出现跨域问题,这时候要注释跨域代码,

    在viewer.js文件找到这段代码,(在1861行)然后注释掉
 var fileOrigin = new URL(file, window.location.href).origin;
 if (fileOrigin !== viewerOrigin) {
   throw new Error('file origin does not match viewer\'s');
 }

五、这时候基本就能看了


pc端效果

手机端效果 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/854666.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在矩池云使用ChatGLM-6B ChatGLM2-6B

ChatGLM-6B 和 ChatGLM2-6B都是基于 General Language Model (GLM) 架构的对话语言模型&#xff0c;是清华大学 KEG 实验室和智谱 AI 公司于 2023 年共同发布的语言模型。模型有 62 亿参数&#xff0c;一经发布便受到了开源社区的欢迎&#xff0c;在中文语义理解和对话生成上有…

语音信号的A律压缩和u律压缩matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 A律压缩算法 4.2 μ律压缩算法 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 clc; clear; close all; warning off; addpath(genpath(…

DanceFight VoxEdit 大赛

准备好让自己的创造力更上一层楼了吗&#xff1f;别再犹豫了&#xff0c;The Sandbox 将为你们带来一场激动人心的挑战&#xff0c;让你们的 VoxEdit 技能和舞蹈动作激情四射&#xff01;准备好参加终极数字盛会——DanceFight VoxEdit 大赛&#xff01;&#x1f57a;&#x1…

物理层扩展以太网

扩展站点与集线器之间的距离&#xff1a;   在10BASE-T星型以太网中&#xff0c;可使用光纤和一对光纤调制解调器来扩展站点与集线器之间的距离。   为站点和集线器各增加一个用于电信号和光信息号转换的光纤调制解调器&#xff0c;以及他们之间的通信光纤。 扩展共享式以太…

ICS PA0

目录 环境配置工具的使用及相关资源Compling and Running NEMU配置系统make menuconfig项目构建make运行与调试 Submit 环境配置 Ubuntu安装中的分区不太明白安装了中文输入法和必要的工具链虚拟机与主机互联 工具的使用及相关资源 vim&#xff08;vimtutor是vim的一个内置教…

Nginx跳转模块——location与rewrite

一、location 1、location作用 用于匹配uri&#xff08;文件、图片、视频&#xff09; uri&#xff1a;统一资源标识符。是一种字符串标识&#xff0c;用于标识抽象的或物理资源文件、图片、视频 2、locatin分类 1、精准匹配&#xff1a;location / {...} 2、一般匹配&a…

【80天学习完《深入理解计算机系统》】第三天 2.3 整数运算【正负溢出】【运算的溢出】【类型转换的二进制扩展】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09;   文章字体风格&#xff1a; 红色文字表示&#…

ATF(TF-A)安全通告 TFV-6 (CVE-2017-5753, CVE-2017-5715, CVE-2017-5754)

ATF(TF-A)安全通告汇总 目录 一、ATF(TF-A)安全通告 TFV-6 (CVE-2017-5753, CVE-2017-5715, CVE-2017-5754) 二、Variant 1 (CVE-2017-5753) 三、Variant 2 (CVE-2017-5715) 四、Variant 3 (CVE-2017-5754) 一、ATF(TF-A)安全通告 TFV-6 (CVE-2017-5753, CVE-2017-5715, C…

向量数据库介绍

1.什么是向量数据 向量数据库是一种专门用于存储和检索向量数据的数据库。它不同于传统的关系型数据库&#xff0c;而是基于向量相似度匹配的方式来实现高效的数据查询和分析。 向量数据库的应用场景非常广泛&#xff0c;包括但不限于以下几个方面&#xff1a; 图片、音频和视频…

微服务02-docker

1、Docker架构 1.1 镜像和容器 Docker中有几个重要的概念&#xff1a; 镜像&#xff08;Image&#xff09;&#xff1a;Docker将应用程序及其所需的依赖、函数库、环境、配置等文件打包在一起&#xff0c;称为镜像。Docker镜像是用于创建 Docker 容器的模板 。就像面向对象编…

js代码执行顺序(同步与异步)

1.同步与异步 异步任务又分为宏任务和微任务 2.执行规则 同步代码遇到,直接执行Promise中.then前的代码直接执行,.then后的代码丢入微任务队列中遇到定时器直接将里面的代码丢入宏任务队列中同步代码执行完&#xff0c;去看微任务,有则执行&#xff1b;再去看宏任务&#xf…

文件的权限

1、修改文件的所属者和所属组 2、修改文件某一类人&#xff08;所属者、所属组、其他人&#xff09;的权限 一、用户对于普通文件的权限 二、用户对于目录文件的权限 三、访问控制列表ACL 四、特殊权限&#xff08;了解&#xff09; wuneng创建了几个文件&#xff0c;xiaoming对…

【C语言】预处理详解

本文目录 1 预定义符号 2 #define 2.1 #define 定义标识符 2.2 #define 定义宏 2.3 #define 替换规则 2.4 #和## 2.5 带副作用的宏参数 2.6 宏和函数对比 2.7 命名约定 3 #undef 4 命令行定义 5 条件编译 6 文件包含 6.1 头文件被包含的方式 6.2 嵌套文件包含 1 预定义符号 __…

2023亚马逊秋季大促定档!卖家要做好准备!

亚马逊Prime秋季促销&#xff0c;又称亚马逊Prime会员早享日&#xff08;Prime Early AccessSale&#xff09;&#xff0c;是亚马逊在2022年才正式推出的一个面向Prime会员的促销活动&#xff0c;与每年7月举办的Prime Day大促是同等级活动&#xff0c;去年秋季大促也是在10月举…

C - The Battle of Chibi

题意&#xff1a;就是问你数组中长度为m的上升子序列(没说连续&#xff09;有多少个。 1&#xff1a;可以想到状态表示dp[ i ][ j ] 代表以 a[i] 为结尾的且长度为 j 的严格单增子序列的数目&#xff0c; 那么状态计算就为 , 那我们如果不优化直接写&#xff0c;一层n&am…

数据结构刷题训练——链表篇(一)

目录 前言 题目一&#xff1a;链表的中间节点 思路 分析 题解 题目二&#xff1a;链表中倒数第k个结点 思路 分析 题解 题目三&#xff1a;合并两个有序链表 思路 分析 题解 方法二 题解 题目四&#xff1a;链表的回文结构 思路 分析 题解 总结 前言 今天我将开…

家政小程序开发制作

家政小程序是一种基于移动互联网的工具&#xff0c;旨在为用户提供方便快捷的家政服务。下面是家政小程序的功能介绍&#xff1a; 1. 家政服务展示&#xff1a;家政小程序可以展示各类家政服务的详细信息&#xff0c;包括清洁、保姆、月嫂、保洁等多种服务项目&#xff0c;以及…

【vue3】基础知识点-pinia

学习vue3&#xff0c;都会从基础知识点学起。了解setup函数&#xff0c;ref&#xff0c;recative&#xff0c;watch、computed、pinia等如何使用 今天说vue3组合式api&#xff0c;pinia 戳这里&#xff0c;跳转pinia中文文档 官网的基础示例中提供了三种写法 1、选择式api&a…

性能测试场景分析并设计?超细案例讲解

前言 性能测试场景&#xff0c;其实和功能测试没什么区别&#xff0c;只是侧重点不同。 我们在功能测试中经常用到的等价类边界值等分析和设计测试case的方法&#xff0c;目的是为了尽可能的覆盖业务场景&#xff0c;避免遗漏导致的功能逻辑缺失或者未达到预期。 而在性能测试…

【C++】初识模板

C模板入门 一、泛型编程 二、函数模板1. 函数模板的概念2. 函数模板格式3. 函数模板的原理4. 函数模板的实例化5. 模板参数的匹配原则 三、类模板 一、泛型编程 假设我们想实现一个交换函数&#xff0c;并且支持不同类型的参数实现&#xff0c;我们可以用 typedef 将类型进行重…