文件导入、导出（下载文件）. 复制粘贴文本（难点）

导入导出

---

1、导入：

upload组件上传到阿里云服务器获取到地址，地址传给后台

2、导出（包含下载模板等）：

1）后台获取到下载的url地址；

2）a标签进行下载

页面动态创建+添加a标签【href（下载文件地址），downLoad（文件名称）】 触发a标签点击事件 删除a标签

demo：

// 获取文件路径名称(path为下载地址) export function getLastNameLocation(path) { if (path.lastIndexOf('\\') >= 0) { const reg = new RegExp('\\\\', 'g') path = path.replace(reg, '/') } return path.substring(path.lastIndexOf('/') + 1) } // 前端下载文件（获取下载地址创建a进行下载） export function downloadFile(url, hrefName) { const a = document.createElement('a') a.href = url a.download = hrefName document.body.appendChild(a) a.click() document.body.removeChild(a) }

复制粘贴

---

1、使用vue第三方插件：vue-clipboard2

main.js: import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) vue文件： // 复制 async copy() { await this.$copyText('啦啦啦').catch(res => { this.$message.error('复制失败') return }) this.$message.success('复制完毕') },

2、使用js原生：

选中文本， document.execCommand('copy')复制（复制选中的文本） 选中文本2种方法（方法1 方法2)--> 选中函数方法 input等使用select()选中，

1）方法1：

// 选中文本(element为文本标签dom元素) export function select (element) { const selection = window.getSelection() // 获取选中对象 const range = document.createRange() // 区域 range.selectNodeContents(element) // 某标签中的区域 selection.removeAllRanges() selection.addRange(range) // 选中该区域 } // 将选中的文本添加到剪贴板中 // 操作可编辑的内容 export function copyClipboard(){ document.execCommand('copy') }

2）方法2：

// content为要复制的内容 // document.execCommand('copy')复制前提是选中可编辑区域， input.select()会选中input中内容 function copy(content) { const dom = document.createElement('input') dom.value = content document.body.appendChild(dom) dom.select() document.execCommand('copy') document.body.removeChild(dom) }

前端下载文件

---

1)从后台获取 二进制形式： blob实现 url ： 通过a标签(download受同源策略影响)（从后台获取的，不存在跨域）

2）第三方获取url(出现跨域问题) 跨域：上传到云服务器，前端从云服务器获取url(此时跨域) ----a标签的download对跨域没效果，只能预览 1）后台处理再返回太麻烦 (也可让后台处理返回同域的) 2）新建canvas…

跨域下载文件会出现该问题： 说明你的服务端缺少了允许跨域访问的配置。（解决Access-Control-Allow-Origin） 需要后端修改配置

具体代码： 1）创建bolb对象实现 //和a标签downLoad一样，通过URL.createObjectURL(blob)获取 Url，赋值给a标签的src //（var blob = new Blob(['后台返回的二进制文件'],{type : '该文件是什么类型的文件(MIME)'});） var blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=utf-8' }) // 前端下载文件 export function blobDownload(fileName, blob) { if ('msSaveOrOpenBlob' in navigator) { // IE下 navigator.msSaveOrOpenBlob(blob, fileName) } else if ('download' in document.createElement('a')) { // 非IE下 const url= URL.createObjectURL(blob) const a= document.createElement('a') a.download = fileName //a.style.display = 'none' a.href = url document.body.appendChild(a) a.click() document.body.removeChild(elink) URL.revokeObjectURL(a.href) // 释放URL 对象 } else { // Safari v<10 //URL.createObjectUrl(blob)生成url地址 location.href = URL.createObjectURL(blob) } } 2）a标签url： // 前端下载文件（获取下载地址创建a进行下载） export function downloadFile(url, hrefName) { debugger const a = document.createElement('a') a.href = url a.download = hrefName document.body.appendChild(a) a.click() document.body.removeChild(a) } // 获取文件路径名称(path为下载地址) export function getLastNameLocation(path) { if (path.lastIndexOf('\\') >= 0) { const reg = new RegExp('\\\\', 'g') path = path.replace(reg, '/') } return path.substring(path.lastIndexOf('/') + 1) } 3）解决跨域： // 跨域下载图片 export function downloadIamge(imgsrc, name) { // 下载图片地址和图片名 const image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous') image.onload = function() { // 创建canvas，得到图片base64编码的数据 const canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height const context = canvas.getContext('2d') context.drawImage(image, 0, 0, image.width, image.height) const url = canvas.toDataURL('image/png') // 得到图片的base64编码数据 const a = document.createElement('a') // 生成一个a元素 a.download = name || 'photo' // 设置图片名称 a.href = url // 将生成的URL设置为a.href属性 document.body.appendChild(a) a.click() document.body.removeChild(a) } image.src = imgsrc }