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

需求:系统有个操作手册,点击会在浏览器新开个窗口并打开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.mzph.cn/news/71087.shtml

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

相关文章

QTableWidget实现鼠标悬停整行高亮显示

一、最终效果 二、 重写QTableWidget类 mytablewidget.h #ifndef MYTABLEWIDGET_H #define MYTABLEWIDGET_H#include <QTableWidget>class MyTableWidget : public QTableWidget { public:explicit MyTableWidget(QWidget* parent nullptr);protected:void leaveEve…

Python 套接字编程完整指南

推荐&#xff1a;使用 NSDT场景编辑器 快速搭建3D应用场景 连接设备以交换信息是网络的全部意义所在。套接字是有效网络通信的重要组成部分&#xff0c;因为它们是用于通过本地或全球网络以及同一台计算机上的不同进程在设备之间传输消息的基本概念。它们提供了一个低级接口&am…

zipkin2.24.2源码install遇见的问题

1、idea导入项目后将Setting中的关于Maven和Java Compile相关的配置改为jdk11,同时Project Structure改为jdk11 2、将pom配置中的fork标签注释 标题未修改以上配置产生的问题 Compilation failure javac: Ч ı : --release : javac <options> <source files&g…

python3

#安装python3 brew install python3 看到下图表示安装python3成功: #将python3 加入环境变量 export PATH$PATH:/opt/homebrew/bin/#查看python 版本 python3 --version#查看pip 版本 pip3 --version#更新python源 pip3 config set global.index-url https://pypi.tuna.tsing…

Nginx中实现自签名SSL证书生成与配置

文章目录 一.相关介绍1.生成步骤2.相关名词介绍 二.Nginx中实现自签名SSL证书生成与配置1.私钥生成2.公钥生成3.生成解密的私钥key4.签名生成证书5.配置证书并验证6.登录 一.相关介绍 1.生成步骤 &#xff08;1&#xff09;生成私钥&#xff08;Private Key&#xff09;&…

WPF列表样式

WPF的数据绑定系统自动生成列表项对象&#xff0c;为单个项应用所需的样式不是很容易。解决方案是ItemContainerStyle 属性。如果设置了ItemContainerStyle 属性&#xff0c;当创建列表项时&#xff0c;列表控件会将其向下传递给每个项。对于ListBox控件&#xff0c;每个项有Li…

java8 Stream应用合集

多个数据集合如何合并为一个数组 List<Map<String,Object>> data1 this.queryReportInvestSu(param);List<Map<String,Object>> data2 this.queryReportInvestSu(param);List<Map<String,Object>> data3 this.queryReportInvestSu(para…

浅述C++模板——函数模板及类模板

前言 模板作为 C 的一大特色&#xff0c;对于泛型编程有着重要的作用。同时&#xff0c;对于大规模类似的函数或是类型不确定的类&#xff0c;模板都起了至关重要的作用。 一、模板 在开始学习模板之前&#xff0c;我们首先需要了解模板。先看下面一个例子&#xff1a; #in…

微信小程序开发前准备

文章目录 一.注册微信小程序开发账号&#xff08;一&#xff09;访问微信公众平台官网&#xff08;二&#xff09;进入注册页面&#xff0c;完成注册信息&#xff08;三&#xff09;设置微信小程序信息 二.获取微信小程序的AppID(一) 什么是小程序AppID&#xff08;二&#xff…

从零开始,无需公网IP,搭建本地电脑上的个人博客网站并发布到公网

文章目录 前言1. 安装套件软件2. 创建网页运行环境 指定网页输出的端口号3. 让WordPress在所需环境中安装并运行 生成网页4. “装修”个人网站5. 将位于本地电脑上的网页发布到公共互联网上 前言 在现代社会&#xff0c;网络已经成为我们生活离不开的必需品&#xff0c;而纷繁…

C#写一个UDP程序判断延迟并运行在Centos上

服务端 using System.Net.Sockets; using System.Net;int serverPort 50001; Socket server; EndPoint client new IPEndPoint(IPAddress.Any, 0);//用来保存发送方的ip和端口号CreateSocket();void CreateSocket() {server new Socket(AddressFamily.InterNetwork, SocketT…

Android 使用OpenCV实现实时人脸识别,并绘制到SurfaceView上

1. 前言 上篇文章 我们已经通过一个简单的例子&#xff0c;在Android Studio中接入了OpenCV。 之前我们也 在Visual Studio上&#xff0c;使用OpenCV实现人脸识别 中实现了人脸识别的效果。 接着&#xff0c;我们就可以将OpenCV的人脸识别效果移植到Android中了。 1.1 环境说…

【Java Web】统一处理异常

一个异常处理的ControllerAdvice类。它用于处理Controller注解的控制器中发生的异常。 具体代码功能如下&#xff1a; 导入相关类和方法。声明一个Logger对象&#xff0c;用于日志记录。使用ExceptionHandler注解标记handleException方法&#xff0c;用于处理所有异常。 -嘛在…

快速安装k8s

RKE安装方式 官方文章资源地址 https://rke.docs.rancher.com/installation rke工具下载地址&#xff08;arm,amd,windows都有&#xff09; https://github.com/rancher/rke/releases x86的用amd64下载rke工具 https://github.com/rancher/rke/releases/download/v1.4.8/rke_li…

【文末送书】全栈开发流程——后端连接数据源(二)

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…

2023年海外推广怎么做?

答案是&#xff1a;2023海外推广可以选择谷歌SEO谷歌Ads双向运营。 理解当地文化 成功的海外推广首先是建立在对当地文化的深入了解和尊重的基础上。 本土化策略 为了更好地与当地用户互动&#xff0c;你的品牌、产品或服务需要与他们的文化和生活方式紧密相连。 例如&…

javaee spring aop 的五种通知方式

spring配置文件 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns:aop"http://www.springframework.…

好用免费的Chat GPT(亲测有用)

1、MindLink麦灵 MindLink麦灵 点进登录后 普通用户可以提问100次 2、你问我答 你问我答 无限次数的。 3、灵感 灵感 点击链接后会提示你如何下载使用。 这个有win版和mac版&#xff0c;点击登陆后&#xff0c;每日都会有30次GPT3/3.5的提问。 4、WebTab 在浏览器插件中…

软文推广效果怎么样?这篇揭晓答案

软文推广是一种常用的网络营销手段&#xff0c;它通过以文章形式发布关于产品、服务或品牌的信息&#xff0c;来引起受众的兴趣和关注。相较于直接宣传广告&#xff0c;软文推广更注重内容的质量和吸引力&#xff0c;能够更好地传递信息并提升用户转化率。本文伯乐网络传媒将探…

易点易动库存管理系统与ERP系统打通,帮助企业实现低值易耗品管理

现今,企业管理日趋复杂,无论是核心经营还是辅助环节,都需要依靠信息化手段来提升效率。而低值易耗品作为企业日常运营中的必需品,其管理也面临诸多挑战。传统做法效率低下,容易出错。如何通过信息化手段实现低值易耗品的高效管理,成为许多企业必顾及的一个课题。 易点易动作为…