vue中预览静态pdf文件

news2024/11/17 14:31:32

方法

    // pdf预览
    viewFileCompare() {
      const pdfUrl = "/static/wjbd.pdf";
      window.open(pdfUrl);
    },

    // 下载
    downloadFile(){
      var a = document.createElement("a");
      a.href = "/static/wjbd.pdf";
      a.download = "文件比对操作手册.pdf";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    }

可能出现的问题

404问题,可能是文件地址有问题。

注意,这里要在public文件夹中新建文件夹存放静态资源,不能在src文件夹中新建文件夹存放静态资源,因为public文件夹中的文件资源不会被npm run build打包编译。

大家打包一下,就会发现文件是存放在dist/static文件夹中。

 

Vue处理静态资源及public/static/assets目录的区别

public文件夹中的文件会原封不动的放到dist文件夹中,且不会被压缩、合并。

build之后,assets目录中的文件,会被合并到一个文件中,然后进行压缩。多用来存放业务级的js、css等,如一些全局的scss样式文件、全局的工具类js文件等。

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

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

相关文章

王道考研数据结构第二章知识点总结

2.1 线性表的定义和基本操作 2.2.1 顺序表的定义 2.2.1 顺序表的插入删除 注意:插入操作中插入一个元素是从后往前移(从最后一个开始处理);而删除操作中是从前往后移(从需要删除的后一个开始移)。 2.2.2 顺序表的查找 2.3.1 单链表的定义 2.3.2-1 单链…

CCLINK转profinet网关cclink转modbus

在工业自动化领域,不同品牌的PLC控制系统之间的数据交互是一个重要的问题。比如说,如果我们需要将三菱PLC的数据和西门子PLC的数据进行交互,我们应该如何处理呢?在这方面,捷米的JM-PN-CCLK通讯网关为我们提供了一种解决…

Python中的Cookie模块有什么功能

什么是Cookie Cookie(或HTTP Cookie)是一小段由Web服务器发送到Web浏览器并保存在用户本地计算机上的数据。它通常用于跟踪和识别用户的会话信息,以提供个性化的用户体验。 Cookie的工作原理 1. 当用户访问一个网站时,服务器会生…

在docker中安装使用达梦数据库

关于在docker中安装达梦数据库,达梦官方网站其实是有提供安装使用方法的,但可能还是有朋友不会,这里将在原文基础上简单扩充下。 注意:docker容器中,数据库安装后没有创建服务的脚本,只有bin、bin2、conf、…

VMWare虚拟机常用操作命令

今日一语:做到所有的细节都不放过,则可以避免99%已知的风险,但大多数都因懒惰而甘愿承受风险,至此悔不当初 查看虚拟机在本机网络的IP ip addr 本地向虚拟机传送文件 scp 文件 rootpath 虚拟机路径 enter后输入密码即可传输&am…

LoRA:大模型下游任务的低秩适应

论文标题:LoRA: Low-Rank Adaptation of Large Language Models 论文链接:https://arxiv.org/abs/2106.09685 论文来源:NVIDIA 一、概述 自然语言处理中的一个重要范式是在通用域数据上进行大规模预训练,然后在特定任务或域上适配…

开发一个RISC-V上的操作系统(二)—— 系统引导程序(Bootloader)

目录 文章传送门 一、什么是Bootloader 二、简单的启动程序 三、上板测试 文章传送门 开发一个RISC-V上的操作系统(一)—— 环境搭建_riscv开发环境_Patarw_Li的博客-CSDN博客 开发一个RISC-V上的操作系统(二)—— 系统引导…

SpringBoot中接口幂等性实现方案-自定义注解+Redis+拦截器实现防止订单重复提交

场景 SpringBootRedis自定义注解实现接口防刷(限制不同接口单位时间内最大请求次数): SpringBootRedis自定义注解实现接口防刷(限制不同接口单位时间内最大请求次数)_redis防刷_霸道流氓气质的博客-CSDN博客 以下接口幂等性的实现方式与上面博客类似,…

实战攻防Demo|如何轻松形成自动响应的安全闭环?

从威胁阻断角度来说,拦住黑客的第一步攻击尤为重要。同样,对于攻击者来说,第一步攻击的成本也往往是最高的。日常工作中人们会遇到很多类型的攻击,但暴力破解或者撞库攻击往往被作为黑客的第一步攻击。这主要源于其技术含量低&…

express编写一个简单的get接口

/01编写get接口.jsconst express require(express) const app express()// 创建路由 const useRouter require(./router/user.js) // 注册路由 app.use(/api,useRouter)app.listen(8080, (req, res) > {console.log(8080监听) }) ./02编写post接口 // 注意:如…

ESP32(MicroPython) 两轮差速五自由度机械臂小车

这次的项目在软件上没多少调整,但本人希望分享一下硬件上的经验。 小车使用两轮差速底盘,驱动轮在小车中间,前后都要万向轮。这种形式可以实现0转弯半径,但受万向轮及用于加高的铜柱的规格限制,两个万向轮难以调到相同…

3ds MAX 洗菜池

在家居中我们显然离不开这个对吧 首先绘制一个长方体作为基础 注意设置长宽高的网格大小,方便后续调整 俯视图网格线如下: 长方形变换为可编辑网络,并在【多边形】界面选择底面的所有多边形,按delete删除,形成一个壳体…

AtcoderABC233场

A - 10yen StampA - 10yen Stamp 题目大意 Takahashi已有X日元邮票,计算出Takahashi至少需要再贴多少个10日元的邮票才能使得信封上的邮票总价值达到Y日元。 思路分析 我们只需要计算Y - X,即Y日元减去X日元的差值。如果该差值大于等于0,则…

MyBatisPlus分页功能实现

MyBatisPlus分页功能实现 1. MyBatisPlus分页使用1.1 设置分页拦截器作为Spring管理的bean1.2 执行分页查询 2. 开启MyBatisPlus日志3. 解决日志打印过多问题3.1 取消初始化spring日志打印3.2 取消SpringBoot启动banner图标3.3 取消MybatisPlus启动banner图标 1. MyBatisPlus分…

零信任安全解决方案

什么是零信任 零信任网络架构 (ZTNA) 或零信任安全是一种新的组织网络安全方法。它旨在修复传统基于边界的安全性中的缺陷并简化网络设计。 它以“永不信任,始终验证”的原则运作。这意味着,无论用户或设备位于何处,…

基于自适应运动补偿的双向运动估计算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ..........................................................................% 单向运动法 …

繁體標楷體 如何安装使用?

中文繁體標楷體。 ——这个地方下载:http://www.downcc.com/font/316365.html ——下载下来被叫做“台湾标楷体DFKai-SB.ttf” ——安装到“C:\Windows\Fonts”以后名字叫 ——在WPS中使用,被称为这个

使用node内置test runner,和 Jest say 拜拜

参考 https://nodejs.org/dist/latest-v20.x/docs/api/test.html#test-runner 在之前,我们写单元测试,必须安装第三方依赖包,而从node 20.0.0 版本之后,可以告别繁琐的第三方依赖包啦,可直接使用node的内置test runner…

【搜索引擎Solr】Apache Solr 神经搜索

Sease[1] 与 Alessandro Benedetti(Apache Lucene/Solr PMC 成员和提交者)和 Elia Porciani(Sease 研发软件工程师)共同为开源社区贡献了 Apache Solr 中神经搜索的第一个里程碑。 它依赖于 Apache Lucene 实现 [2] 进行 K-最近邻…

龙芯iTOP-2K1000开发板制作启动U盘

我们准备一个 U 盘(最小不要小于 4G,最大不要大于 32G),U 盘有且只有一个分区,U 盘格式化成 FAT32 分区,,如不满足要求,请格式化您的 U 盘,准备完成如下图所示 格式化软…