vue中使用window.open打开assets文件夹下的pdf文件

news2024/12/29 11:51:51

需求:系统有个操作手册,点击会在浏览器新开个窗口并打开pdf文件。这个pdf文件存储在本地assets文件夹中。

文件结构:

注:直接使用window.open(文件路径)不能打开,需要在vue.config.js中配置所需文件

引入图中红框中的代码


const webpack = require('webpack')

        plugins: [
            // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
            new CompressionPlugin({
                cache: false, // 不启用文件缓存
                test: /\.(js|css|html)?$/i, // 压缩文件格式
                filename: '[path].gz[query]', // 压缩后的文件名
                algorithm: 'gzip', // 使用gzip压缩
                minRatio: 0.8 // 压缩率小于1才会压缩
            }),
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            }),

        ],
        module: {
            rules: [{
                test: /\.pdf$/,
                use: [{

                    loader: 'url-loader',
                    options: {
                        limit: 2,
                        name: 'files/[name].[ext]'
                    }
                }]
            }]
        }

页面中打开:(我是在初始化的时候就打开文件,没用按钮)

mounted(){
    window.open(require('../../../../assets/xxx.pdf'))
}

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

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

相关文章

AMD 锐龙 8000系 APU 将补完其产品线,推出 12C24T16CU 和 16C32T40CU

我们大家都知道一直以来,AMD 的 APU 只到 R7,也就是 R7-x700G 和 r7-x800H。虽然也有 R9-x900HX,但它毕竟是 x800H 硬超上去的,核心数完全一样,并不能叫做真正的 R9。 究其原因,AMD 的 APU 是移动端优先的…

如何将Word中的中文数字转化为阿拉伯数字

例如这种情况: 需要把这些汉字数字改为阿拉伯数字。 步骤1:在任意位置输入“第章”,然后把光标放到“第”和“章”的中间,然后ctrlf9插入域,在域里面输入 autonum,然后按altf9 显示域值。 按下altF9后 第 …

优化案例5:视图目标列改写优化

优化案例5:视图目标列改写优化 1. 问题描述2. 分析过程2.1 目标SQL2.2 解决思路1)效率低的执行计划2)视图过滤性3)查看已有索引定义 2.3 视图改写2.4 增添复合索引 3. 优化总结 DM技术交流QQ群:940124259 1. 问题描述…

Typora 远程代码执行漏洞(CVE-2023-2317)

Typora 远程代码执行漏洞 【CVE-2023-2317】 一、产品介绍二、影响版本三、漏洞复现四、深入复现1.启动teamserver服务2.cs生成exe马子3.开启http.server4.导入组合拳到md文件(1)下载马子的第一个命令,自行base64解密修改路径(2)执行马子的第二条代码,注…

【高级程序设计语言C++】右值引用

1. 左值引用和右值引用2. 修改的右值3. 左值引用和右值引用的比较3.1. 左值引用总结3.2. 右值引用总结 4. 右值引用使用场景和意义5. 完美转发 1. 左值引用和右值引用 什么是左值?什么是左值引用? 左值是一个表示数据的表达式(如变量名或解引用的指针)…

计算机网络 概述部分

目录 计算机网络在信息时代的作用 计算机网络的重要特征 网络,internet,Internet的区别 局域网 广域网的区别 网络协议的分层 计算机网络在信息时代的作用 计算机网络的重要特征 连通性:彼此联通,交换信息 共享性:信息共享…

精准运营,智能决策!解锁天翼物联水利水务感知云

面向智慧水利/水务数字化转型需求,天翼物联基于感知云平台创新能力,提供涵盖水利水务泛协议接入、感知云水利/水务平台、水利/水务感知数据治理、数据看板在内的水利水务感知云服务,构建水利水务感知神经系统新型数字化底座,实现智…

WebGpu VS WebGL

推荐:使用 NSDT场景编辑器 助你快速搭建3D应用场景 WEBGPU VS. WEBGL 粗略地概述一下WebGPU与WebGL的不同之处是很有用的。在不涉及太多复杂的技术细节的情况下,两者的整体设计大致如下: WebGL和OpenGL一样,涉及许多单独的函数调…

Docker基础入门:容器数据卷与Dockerfile构建镜像(发布)

Docker基础入门:容器数据卷与Dockerfile构建镜像(发布) 一、docker容器数据卷1.1、使用docker容器数据卷1.2、具名挂载、匿名挂载1.3、如何确定是具名挂载还是匿名挂载 二、使用dockerfile2.1 初识Dockerfile2.2 Dockerfile构建过程2.3 Docke…

Nacos 未授权访问(CVE-2021-29441)

Nacos 未授权访问(CVE-2021-29441) Nacos是阿里巴巴推出的一个新的开源项目。它是一个动态的服务发现、配置管理和服务管理平台,可以更轻松地构建云原生应用程序。致力于帮助发现、配置和管理微服务。Nacos 提供了一套简单易用的功能集,可以快速实现动态…

火山引擎 DataLeap 助你拥有 Notebook 交互式的开发体验

更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 Notebook 是一种支持 REPL 模式的开发环境。所谓「REPL」,即「读取-求值-输出」循环:输入一段代码,立刻得到相应的结果&#xff…

SAP_ABAP_接口技术_PI实践总结

SAP ABAP顾问能力模型梳理_企业数字化建设者的博客-CSDN博客SAP Abap顾问能力模型https://blog.csdn.net/java_zhong1990/article/details/132469977一、背景说明 1.1 案例介绍 1.1.1 实现OA系统 --> PI系统 --> SAP系统的过程 二、实现步骤 1.2 PI中间件的实现过程 …

LabVIEW | 串口基础【自学】

转载 B站   up:不烧板子 地址:https://www.bilibili.com/read/cv9435378 原博图片不清楚,自己重新跟学截图自留,侵删 文章目录 一、串口基础1.串口发送(1)简单发送(2)循环发送&…

第三方ipad电容笔哪个牌子好用?开学好用电容笔推荐

现在,市面上有很多种类型的电容笔,在选择的时候,我们很容易踩雷,比如,我们购买的一些产品在书写过程中,往往会出现断触,或者是防误触功能不起作用。所以我们买东西的时候必须要注意产品配置。对…

87. 扰乱字符串

题目链接:力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 解题思路: 对于给定的两个字符串S和T。 如果S和T的长度不相等,T肯定不是S的扰乱字符串。 如果S和T的长度相等,则可以在某一个随机下标处进行…

空时自适应处理用于机载雷达——波束空间空时自适应处理(Matla代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

[CFI-CTF 2018]powerPacked 题解

脱掉upx壳 逻辑很简单 str"EHK}kanqxgarqygtre" flag"" for i in str:flagchr(ord(i)-2) print(flag) CFI{i_love_powerpc}

ThreadLocal概述

一、概述 ThreadLocal被称为线程局部变量,用于在线程中保存数据。由于在ThreadLocal中保存的数据仅属于当前线程,所以该变量对其他线程而言是隔离的,也就是说该变量是当前线程独有的变量。 ThreadLocal用于在同一个线程间,在不同的…

Prompt GPT推荐社区

大家好,我是荷逸,这次给大家带来的是我日常学习Prompt社区推荐 Snack Prompt 访问地址:http://snackprompt.com Snack Prompt是一个采用的Prompts诱导填空式的社区,它提供了一种简单的prompt修改方式,你只需要输入关…

​Spring Cloud Alibaba与Nacos版本对应关系​

下面是Spring Cloud Alibaba与Nacos版本对应关系 Spring Cloud Alibaba VersionNacos Version2021.0.1.0*1.4.22.2.7.RELEASE2.0.32.2.6.RELEASE1.4.22021.1 or 2.2.5.RELEASE or 2.1.4.RELEASE or 2.0.4.RELEASE1.4.12.2.3.RELEASE or 2.1.3.RELEASE or 2.0.3.RELEASE1.3.32.…