项目需求

在项目中需要对pdf、word、excel等文档的下载
也就是获取文件的静态路径，下载到本地。
方案：利用 axios 下载

具体实现

项目技术 Vue2 + element UI中实现
首先需要一个按钮来触发点击事件

<el-button type="primary" @click="download">下载文档</el-button>

在需要下载文档的页面引入 axios

import axios from 'axios';

将需要导出的文件放到 static 文件下

download(){axios('static/file.pdf',{responseType: 'blob', //重要代码}).then(res =>{const url = window.URL.createObjectURL(new Blob([res.data]));const link = document.createElement('a');link.href = url;let fileName = "使用说明文档" //保存到本地的文件名称link.setAttribute('download', fileName);document.body.appendChild(link);link.click();}
}

项目技术 Vue3 + element UI中实现
与Vue2项目一样，需要按钮来触发事件

<el-button type="primary" @click="download">下载文档</el-button>

在需要下载文档的页面引入 axios

import axios from 'axios';

将需要导出的文件放到 public 文件下
实现下载代码一致

download(){axios('static/file.pdf',{responseType: 'blob', //重要代码}).then(res =>{const url = window.URL.createObjectURL(new Blob([res.data]));const link = document.createElement('a');link.href = url;let fileName = "使用说明文档" //保存到本地的文件名称link.setAttribute('download', fileName);document.body.appendChild(link);link.click();}
}

注意

Vue2中的静态资源在 static。
Vue3中的静态资源则在 public。
文件存放错的话，会获取不到本地文件的。

Vue下载本地pdf、word、excel文件相关推荐

java PDF/Word/Excel文件内容关键字检索
JAVA程序在PDF.Word.Excel 文件的内容中关键字检索功能(只能检索可编辑文字内容,内容里的图片等格式无法检索) 文件内容的获取不依赖于Windows环境,可在任意环境下运行程序进行检索 ...
Vue下载blob类型的excel文件:
1.思路: 1.请求时加上 responseType: 'blob', 2.处理并下载 2.案例: // 获取收货单位的导入模板 /api/consignee/getTemplate get expo ...
Vue中手动导出Element表格为pdf/word/excel格式
在vue中将element的表格进行导出为pdf/word/excel样式,需要进行一些处理,比较麻烦网页样式导出为表格导出为word 导出为PDF 一.编写工具函数和前置对element样式的 ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
带中文的网页下载为PDF格式的文件(jsPDF)
1.调研主要需要用到插件jsPDF,jsPDF可以将html下载为pdf格式的文件,但无法支持中文字形,下载带中文的网页会有乱码,经验证可以通过如下3种方案下载中文网页. 2.方案 2.1.方案一( ...
js 下载http路径的pdf/word/excel/图片文件
效果图注意:直接下载pdf文件可能会是预览 <!DOCTYPE html> <html><head><meta charset="utf-8&qu ...
【vue2】纯前端实现本地的pdf/word/epub文件预览（包括pdf选中文字，epub高亮等）
前言需求是预览本地的pdf/word/epub格式的文件,但是搜索后发现没有可以直接使用的,格式不同,显示的方式和效果也都略有不同. 最后还是分别实现预览的功能. 补充功能:pdf选中文字,epub ...
下载本地pdf并压缩为zip文件
1.1前端添加按钮 <a-button @click="downloadApplicationFile" type="primary">导出申请书z ...
文档在线预览（二）word、pdf、excel文件转html以实现文档在线预览
文章目录一.前言 1.aspose 2 .poi + pdfbox 3 spire 二.将文件转换成html字符串 1.将word文件转成html字符串 1.1 使用aspose 1.2 使用poi ...

Vue下载本地pdf、word、excel文件

Vue下载本地pdf、word、excel文件

项目需求

具体实现

注意

Vue下载本地pdf、word、excel文件相关推荐

最新文章

热门文章