vue中预览静态pdf文件

方法

    // 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文件等。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

自学网络安全(黑客),遇到问题怎么解决

自学网络安全很容易学着学着就迷茫了,找到源头问题,解决它就可以了,所以首先咱们聊聊,学习网络安全方向通常会有哪些问题,看到后面有惊喜哦 1、打基础时间太长 学基础花费很长时间,光语言都有几门&#xf…

专项练习-1数据结构-02字符串

1. 下面关于「串」的叙述中,哪一个是不正确的?( ) A 串是字符的有限序列 B 空串是由空格构成的串 C 模式匹配是串的一种重要运算 D 串既可以采用顺序存储,也可以采用链式存储 正确答案:B 官方解析&…

如何在3ds max中创建可用于真人场景的巨型机器人:第 1部分

推荐: NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 创建主体 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 在左侧视口中,按键盘上的 Alt-B 键。它 打开视口配置窗口。 打开“锁定缩放/平移”和“匹配位图”选项。单击“文件”并转到参考 …

实验二十四、滞回比较器电压传输特性的测量

一、题目 滞回比较器电压传输特性的测量。 二、仿真电路 电路如图1所示。 为便于观察电压传输特性的变化,输入信号采用信号发生器产生的幅值为 10 V 10\,\textrm V 10V、频率为 20 Hz 20\,\textrm{Hz} 20Hz 的三角波电压。采用虚拟的运算放大电路,其…

从娱乐产品到效率工具,ARknovv首款AR眼镜回归“AR本质”

如果说2022年是AR的元年,2023年则有望成为消费级AR眼镜的新拐点。 今年AR眼镜行业发展明显加快,且不断有大厂入局:今年2月小米发布无线AR眼镜探索版;3月荣耀也推出了一款全新的观影眼镜;而苹果在6月发布的MR头显Visio…

[面试官,你坐好],今天我给你吹下卡顿监控

这是一篇面试总结稿,根据之前的面试过程以一种模拟面试的风格进行阐述。 面试官: 自我介绍下 诶?这面试官头发还比较多,应该不牛逼,心里踏实了不少。我: 面试官你好,我叫**,5年工作经验。曾经跟OPPO产品PK&…

甄云质量管理解决方案——插上数字“羽翼”,实现PPAP落地

导语 质量管理是供应链管理中非常重要的一环,通过制定和开展质量相关的活动,确保产品符合质量标准和一致性要求。质量管理水平的高低直接影响供应链的整体效率和最终效益,关乎企业形象和品牌声誉,已然是企业的生命线。 作为采购…

ES6:Object.assign方法详解

ES6:Object.assign方法详解 1、前言2、语法3、基本用法3.1 目标对象和源对象无重名属性3.2 目标对象和源对象有重名属性3.3 有多个源对象3.4 其他情况3.4.1 只有一个参数时,Object.assign会直接返回该参数3.4.2 如果该参数不是对象,则会先转成…

el-table 表头设置渐变色

<el-table :data"tableData" stripe><el-table-column prop"name" label"测试" align"left"></el-table-column><el-table-column prop"code" label"测试1" align"left"></…

科技云报道:边缘云赛道开启,谁能成为首个“出线”厂商?

科技云报道原创。 每一轮底层技术变革&#xff0c;都会带来全新的商业机遇。随着万物智联时代到来&#xff0c;大量数据产生的源头由传统的中心化向分散数据源变革&#xff0c;越来越多云边协同场景的出现&#xff0c;使得边缘云成为计算领域数据处理的新范式之一。 自2020年…

OR-Tools工具安装(Python-Vs code)-自用

安装&#xff08;已安装python以及Vs code&#xff09; pip安装 python -m pip install --user ortools安装完成示意如下&#xff1a; 验证安装 python -c "import ortools; print(ortools.__version__)"输出结果为版本号

网络:TCP/IP协议

1. OSI七层参考模型 应用层 表示层 会话层 传输层 网络层 数据链路层 物理层 2. TCP/IP模型 应用层 传输层 网络层 数据链路层 物理层 3. 各链路层对应的名称 应用层对应的是协议数据单元 传输层对应的是数据段 网络层对应的是数据包 链路层对应的是数据帧 物理层对应的是比特…

Mysql 简介

Mysql 简介 学习目的 MySQL作为目前最流行的关系型数据库管理系统之一&#xff0c;因其开源免费的特性&#xff0c;成为小型Web应用的重点关注对象。几乎所有的动态Web应用基本都在使用MySQL作为数据管理系统。学习MySQL的目的也是为了更好地理解数据库相关的SQL注入漏洞&…

uniapp实战

上面是tab栏&#xff0c;下面是swiper&#xff0c;&#xff0c;tab和swiper和 红色滑块 动态变化&#xff0c;&#xff0c; 遇到的问题&#xff1a; 往下滚动 tab栏 吸顶&#xff1a; position:sticky; z-index:99; top:0;swiper切换触发 change 事件&#xff0c; :current …

【Unity2D】相机移动以及设置相机边界

添加相机 添加相机时&#xff0c;首先需要在unity中添加 Cinemachine 包 第一次使用这个包时&#xff0c;需要在Package Manager中搜索并安装 安装Camera Mechine包后&#xff0c;添加2D Camera 设置跟随对象为Ruby &#xff08;从Hierarchy中将Ruby拖动到Follow中&#xff0…

UE5 关于MRQ渲染器参数

最佳参数&#xff1a; Spatial Sample Count&#xff1a;使用奇数样本时临时抗锯齿会收敛 Temporal Sample Count&#xff1a;超过2之后&#xff0c;采样过大会造成TAA效果不佳 TSR&#xff1a;UE5最好的抗锯齿方案

AcWing241. 楼兰图腾(树状数组)

输入样例&#xff1a; 5 1 5 3 2 4输出样例&#xff1a; 3 4解析&#xff1a; 以某个点 i 为最低点的 V 的数量&#xff0c;为 i 左侧和右侧比 a[ i ] 大的数量 a&#xff0c;b 的乘积。 但是&#xff0c;直接求这两个数的复杂度为O(n)&#xff0c;则整个复杂度为O( n^2 )&am…

js基础-练习三

九九乘法表&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthsc, initial-scale1.0"><title>九九乘法表</title><style&g…

可解释的 AI:在transformer中可视化注意力

Visualizing Attention in Transformers | Generative AI (medium.com) 一、说明 在本文中&#xff0c;我们将探讨可视化变压器架构核心区别特征的最流行的工具之一&#xff1a;注意力机制。继续阅读以了解有关BertViz的更多信息&#xff0c;以及如何将此注意力可视化工具整合到…

论文笔记--Distilling the Knowledge in a Neural Network

论文笔记--Distilling the Knowledge in a Neural Network 1. 文章简介2. 文章概括3 文章重点技术3.1 Soft Target3.2 蒸馏Distillation 4. 文章亮点5. 原文传送门 1. 文章简介 标题&#xff1a;Distilling the Knowledge in a Neural Network作者&#xff1a;Hinton, Geoffre…