Vue download base64 file

简介: Vue download base64 file

vue dowanload filedownload base64 file

template

<a ref="download" v-show="false" :href="downloadUrl" :download="downloadfilename"></a>

script

export default {
  data () {
    return {
      downloadUrl: null,
      downloadfilename: null
    }
  },
  mounted () {
    let base64Data = 'data:image/png;base64,iVBORw0KGgoAAAAN...'
    console.log(base64Data)
    this.downLoadImage(base64Data)
  },
  methods: {
    downLoadImage (imgUrl) {
      let timestamp = new Date().getTime()
      let name = imgUrl.substring(22, 30) + timestamp + '.png'
      this.downloadUrl = imgUrl
      this.downloadfilename = name
      setTimeout(() => {
        this.$refs.download.click()
      }, 200)
    }
  }
}


相关文章
|
21小时前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
22小时前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
4 0
|
23小时前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
23小时前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
23小时前
|
JavaScript
vue封装面包屑组件
vue封装面包屑组件
5 0
|
23小时前
|
JavaScript
Vue 编写(preventReClick)防暴点 +防抖(debounce)和节流(throttle)函数
Vue 编写(preventReClick)防暴点 +防抖(debounce)和节流(throttle)函数
|
1天前
|
监控 JavaScript 前端开发
Vue 项目性能优化指南:提升应用速度与效率
Vue 项目性能优化指南:提升应用速度与效率
|
2天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
2天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
16 0
|
2天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为&quot;/h5/party/pc/&quot;,在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题