后台管理系统常用功能

导出XLS与图片下载

最新推荐文章于 2025-07-05 16:40:17 发布

转载最新推荐文章于 2025-07-05 16:40:17 发布 · 3.5k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cb7ddede51d456e2b15f601

文章标签：

#后端 #c#

导出xls文件

    请求添加responseType: 'blob'
    // 导出数据功能
    exportXls(data,name){
      console.log(data,'data是文件流')
      if(!data){
        Message({
          type: 'error',
          message: '无数据,导出失败'
        })
        return false
      }
      const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
      const link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      const date = +new Date() 
      link.download = name + date + '.xls'
      link.click()
    }
复制代码

下载图片到本地

import download from 'downloadjs' 
const utils = {
  getBase64Image(img, width, height) {
    var canvas = document.createElement('canvas')
    canvas.width = width || img.width
    canvas.height = height || img.height
    var ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    var dataURL = canvas.toDataURL()
    return dataURL
  },
  getCanvasBase64(img, callback, width, height) {
    var self = this
    var image = new Image()
    image.crossOrigin = ''
    image.src = img
    if (img) {
      image.onload = function() {
        callback(self.getBase64Image(image, width, height))
      }
    }
  },
  downloadQRBase64(base64, name = 'QR') {
    download(base64, `${name}.png`, 'image/png')
  },
  downloadQR(url, width = 50, height = 50, name = `qrcode-${width}x${height}`) {
    if (url.indexOf('?') === -1) {
      url += '?t=' + (+new Date())
    }
    this.getCanvasBase64(url, function(base64) {
      download(base64, `${name}.png`, 'image/png')
    }, width, height)
  },
  /*截取参数 */
  getUrlParam(name, url = '') {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let index = url.indexOf('?')
    url = url.substr(index == -1 ? 0 : index + 1);
    var r = url.match(reg)
    if (r != null) return unescape(r[2])
    return null
  }

}
调用方法
  downloadQR( url + '?t=' + (+new Date()), 300, 300, `qrcode_${date}`)
复制代码

复制功能

使用了vue-clipboard2 使用案例如下：
 <el-button 
 v-clipboard:copy="scope.row.qrcode"
 v-clipboard:success="onCopysuccess"
 v-clipboard:error="onCopyerror">
 复制
 </el-button>
复制代码

转载于:https://juejin.im/post/5cb7ddede51d456e2b15f601