前端button一键预览与下载

阿里icon

打开阿里icon，注册，选用需要的icon，

加入购物车，添加至项目
选择font class ，下载到本地
解压，得到的文件如下：

本地调用

在src_assets下创建了icon文件夹，将所有文件复制进来。iconfont.css内容如下：
在main.js中把css引入进来：
使用button

<el-col :span="1">
<el-button     type="info" circle icon="iconfont icon-wenhao2" @click="userHelp" size="mini" ></el-button></el-col>

预览文件
在methods中写button点击的触发代码，预览文件

methods: {
userHelp(){http_instance.get(`help`).then(res => {let file_path = res.data.download_help_pathwindow.open(API_BASE +"/data/"+file_path)
}

调用结果如下：
图标展示：

预览：

引用

组件-button
组件-icon
Vue Element使用icon图标教程详解(第三方)
index.html文件，引入css样式
记一次小坑–关于window.open()

前端button一键预览与下载相关推荐

VUE 前端PDF分页预览、下载
一.安装PDF插件依赖 // pdf预览 npm install vue-pdf --save// pdf下载 npm install downloadjs 二.完整示例 <template&g ...
前端实现pdf文件的在线预览与下载
前言在项目中我们经常会出现各种各样的法律文件.免责说明等文件需要用户阅读,很多文件除了阅读外还要支持用户下载.为了快速开发,一些变动不大的文件,或者是项目中不想开发富文本的时候我们可以选择直接使用p ...
前端手把手教你js实现附件预览和下载得功能实现
在项目中,经常会遇到做项目关于实现附件预览和下载得功能,那么怎么来实现呢: 在学习之前,首先会应用到Blob相关得知识点: 那么blob到底是什么呢先让我们看看官方关于blob得介绍文章来自于Bl ...
PDF 预览和下载你是怎么实现的？
在开发过程中要求对 PDF 类型的发票提供预览和下载功能,**PDF** 类型文件的来源又包括 H5 移动端和 **PC 端**,而针对这两个不同端的处理会有些许不同,下文会有所提及. 针对 ...
Springboot实现PDF预览、下载、读取
背景:项目中实现pdf文件的预览以及下载环境:jdk1.8.SpringBoot2.0 PDF.js下载地址将下载的源码拷入项目中修改viewer.js: 将defaultUrl: {value: ...
前端-Excel在线预览
前端-Excel在线预览最近项目中有一个 Excel 预览的需求,就调研了一下 xls/xlsx.word.ppt 文件在线预览功能的实现 . 实现 xls/xlsx.word.ppt 在线预览功能 ...
移动端和PC端的pdf预览与下载
34.移动端和PC端的pdf的预览与下载 1.预览需求:在手机端实现pdf的文件与下载,主要是zlb_app中实现过程:在研究了vue-pdf.pdfjs.pdfh5之后,选择了vue-pdf-s ...
前端实现 PDF 预览的常见方案
前端实现 PDF 预览的常见方案由于在搭建个人博客时,想实现在线预览 pdf 格式的个人简历,经过查阅大致有三大类实现方案:本文共涉及以下 5 种实现方案,如下所示: 使用 HTML 标签 ifra ...
海康威视设备网络SDK_Win64 V6.1.9.4_build20220412 java本地demo实现预览视频下载、摄像头转向控制等
1 下载sdk 下载地址:https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10 1.1 下载内容示例 1.2 dem ...

前端button一键预览与下载

阿里icon

本地调用

引用

前端button一键预览与下载相关推荐

最新文章

热门文章