vue-officef实现pdf文件在线预览

一、参考网址
https://www.cnblogs.com/guozhiqiang/p/17957288

1、引入依赖


npm install @vue-office/pdf vue-demi

2、编写组件


<template><vue-office-pdf :src="pdf"/>
</template>
<script>
// import pdf from 'vue-pdf'
import VueOfficePdf from "@vue-office/pdf";
export default {name:'TestPdf',components:{VueOfficePdf},data(){return {// url: require('./pdf/2.pdf')//pdf:'http://static.shanhuxueyuan.com/test.pdf',//pdf:'/static/2.pdf',}}
}
</script><style scoped lang="less"></style>

注意:如果是本地文件需要将pdf放入public 文件下,如果放入其他文件下会报错

正确方式:
1、网络上pdf


<template><vue-office-pdf :src="pdf"/>
</template>
<script>
// import pdf from 'vue-pdf'
import VueOfficePdf from "@vue-office/pdf";
export default {name:'TestPdf',components:{VueOfficePdf},data(){return {// url: require('./pdf/2.pdf')pdf:'http://static.shanhuxueyuan.com/test.pdf',//pdf:'/static/2.pdf',}}
}
</script><style scoped lang="less"></style>

在这里插入图片描述

2、本地pdf


<template><vue-office-pdf :src="pdf"/>
</template>
<script>
// import pdf from 'vue-pdf'
import VueOfficePdf from "@vue-office/pdf";
export default {name:'TestPdf',components:{VueOfficePdf},data(){return {// url: require('./pdf/2.pdf')//pdf:'http://static.shanhuxueyuan.com/test.pdf',pdf:'/static/2.pdf',}}
}
</script><style scoped lang="less"></style>

在这里插入图片描述
在这里插入图片描述

错误路径:

在这里插入图片描述
会报错:
在这里插入图片描述

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

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

相关文章

基于长短期记忆网络 LSTM 的送餐时间预测

前言 系列专栏:【深度学习&#xff1a;算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域&#xff0c;讨论了各种复杂的深度神经网络思想&#xff0c;如卷积神经网络、循环神经网络、生成对…

实战13:lstm bp 机器学习随机森林粮食产量预测-完整代码数据

直接看视频: lstm bp 机器学习随机森林粮食产量预测-完整代码数据_哔哩哔哩_bilibili 看数据: 代码: from sklearn.linear_model import LinearRegression from sklearn import preprocessing import random from sklearn.model_selection import train_test_split from…

postgresql|数据库|闪回插件e-maj的部署和使用

前言&#xff1a; E-Maj 是 PostgreSQL 数据库的一个扩展插件&#xff0c;它的全称为 "Elementary Majordomo"。这个扩展的主要功能是为数据库中的表集提供细粒度的写入日志记录和时间旅行能力。这意味着使用 E-Maj 的用户可以在数据库的特定子集上实现事务的回滚&a…

C++笔记之Unix时间戳、UTC、TSN、系统时间戳、时区转换、local时间笔记

C++笔记之Unix时间戳、UTC、TSN、系统时间戳、时区转换、local时间笔记 ——2024-05-26 夜 code review! 参考博文 C++笔记之获取当前本地时间以及utc时间

Linux定时计划

定时计划 一、计划任务种类 突发性&#xff1a;临时决定只执行一次的任务 at&#xff1a;处理执行一次任务就结束定时性&#xff1a;每隔一定时间需要重复执行此命令 crontab&#xff1a;指定任务&#xff0c;按照设定的周期一直循环执行二、作用 定时任务可以用于自动备份…

TCP/IP协议(一)

一.报文和协议 协议有什么作用&#xff1f;协议定义通信实体间所交换报文的格式和次序&#xff0c;以及在报文发送和/或接收或者其他事件方面所采取的行动(响应)。 什么是报文&#xff1f;指在网络中传输的数据单元&#xff0c;网络通讯的基本单位。&#xff08;HTTP报文、TCP报…

链式二叉树的前,中,后序遍历 AND 结点个数及高度等 文末附带全部代码

目录 前言1. 前序遍历2. 中序遍历3. 后续遍历4. 二叉树结点的个数5. 二叉树叶子结点个数6. 二叉树的高度7. 二叉树第K层结点的个数8. 二叉树查找值为x的结点全部代码总结 正文开始 前言 本文旨在介绍二叉树的链式存储中一些函数的实现 博客主页: 酷酷学!!! 更多文章, 期待关…

01主动安全系统

“安全”一直是车主对车辆考核的重要指标。车辆安全可以分为从主动安全和被动安全两个方面进行分类。今天就来说说汽车主动安全系统的那些事儿。 01.什么是主动安全系统&#xff1f; 主动安全是指尽量自如地操纵控制汽车的安全系统措施。无论是直线上的制动与加速还是左右打方…

【调试笔记-20240526-Linux-在 OpenWrt-23.05 发行版上安装 cloudreve】

调试笔记-系列文章目录 调试笔记-20240526-Linux-在 OpenWrt-23.05 发行版上安装 cloudreve 文章目录 调试笔记-系列文章目录调试笔记-20240526-Linux-在 OpenWrt-23.05 发行版上安装 cloudreve 前言一、调试环境操作系统&#xff1a;Windows 10 专业版调试环境调试目标 二、调…

RTOS(3)极简ARM架构与汇编

1.掌握八条汇编指令即可 读内存loadLDR R0&#xff0c;[addrA]写内存storeSTR R0&#xff0c;[addrA]加ADD R0&#xff0c;R1&#xff0c;R2减SUB R0&#xff0c;R1&#xff0c;R2比较CMP R0&#xff0c;R1跳转B / BL入栈PUSH { R3&#xff0c;LR }出…

网络原理-以太网协议和DNS协议

一、以太网协议 以太网协议会涉及到数据链路层和物理层。 如图&#xff1a; 这里面的目的地址和源地址指的并不是IP地址,而是MAC地址(物理地址)。长度为6个字节。即最多能表示2^48 个地址,也是非常大的,足够给全球每个设备都分配一个地址,因此在网卡出厂的时候都会带有一个唯…

力扣刷题--2176. 统计数组中相等且可以被整除的数对【简单】

题目描述 给你一个下标从 0 开始长度为 n 的整数数组 nums 和一个整数 k &#xff0c;请你返回满足 0 < i < j < n &#xff0c;nums[i] nums[j] 且 (i * j) 能被 k 整除的数对 (i, j) 的 数目 。 示例 1&#xff1a; 输入&#xff1a;nums [3,1,2,2,2,1,3], k …

# linux 系统 没有 ifconfig 命令,提示: ifconfig: command not found

sudo ip route add default via 192.168.1.1 dev eth0# linux 系统 没有 ifconfig 命令&#xff0c;提示&#xff1a; ifconfig: command not found 一、问题描述&#xff1a; 有些伙伴在学习 linux 系统时&#xff0c;在 使用 ifconfig 命令 查询 系统 IP 出现 ifconfig: co…

06中间件RTOS/CP

Autosar CP 操作系统详解-CSDN博客 1. 什么是RTOS &#xff1f; RTOS&#xff0c;英文全称是 Real-time Operation System&#xff0c;中文就是 实时操作系统&#xff0c;又称及时操作系统。 实时操作系统&#xff0c;是指当外界事件或数据产生时&#xff0c;能够接受并以足…

中国人工智能大模型价格战

近年来&#xff0c;人工智能技术迅猛发展&#xff0c;尤其是大模型领域的突破让人们看到了更多的可能性。然而&#xff0c;在这一高科技领域&#xff0c;中美两国的竞争日趋激烈。近日&#xff0c;中国互联网巨头们纷纷启动大模型价格战&#xff0c;引发了广泛关注。这场价格战…

怎么在Qt Designer设计的界面上显示Matplotlib的绘图?

首先&#xff0c;利用Qt Designer设计界面。 设计好后保存为ui文件。 接着&#xff0c;将ui文件转为py文件。 我喜欢在python中进行转换&#xff0c;因此把转换命令封装为函数&#xff0c;运行一下即可。 import os # pyuic5 -o output_file.py input_file.ui #通过命令把.ui…

【云原生】Kubernetes-----POD资源限制与探针机制

目录 引言 一、资源限制 &#xff08;一&#xff09;基本定义 &#xff08;二&#xff09;资源单位 1.CPU资源 2.内存资源 &#xff08;三&#xff09;请求与限制 &#xff08;四&#xff09;定义方式 1.编写yaml文件 2.查看资源情况 二、Pod探针机制 &#xff08;…

动态规划之背包问题中如何确定遍历顺序的问题-组合or排列?

关于如何确定遍历顺序 322. 零钱兑换中&#xff0c;本题求钱币最小个数&#xff0c;那么钱币有顺序和没有顺序都可以&#xff0c;都不影响钱币的最小个数。 所以本题并不强调集合是组合还是排列。 如果求组合数就是外层for循环遍历物品&#xff0c;内层for遍历背包。 如果求…

UML建模

一、概述 二、类图 三、用例图 四、顺序图 五、活动图 六、状态图 七、通信图 八、构件图

学 C/C++ 具体能干什么?

学习 C 和 C 后&#xff0c;你可以从事许多不同的工作和项目&#xff0c;这两种语言以其高性能和低级控制而闻名&#xff0c;特别适合以下几个领域&#xff1a; 1. 系统编程 C 和 C 是系统编程的首选语言&#xff0c;适用于操作系统、驱动程序和嵌入式系统开发。 操作系统开发…