vue页面文件内容下载

项目场景：txt内容一键下载

效果：

js 下载文件

解决方案 代码：

<template>
<div class=''>
  <div id="shili">实例内容实例内容实例内容实例内容</div>
  <button @click="onDown()">保存文件</button>
</div>
</template>
<script>

export default {
  name: "",
  data () {
    return {
    };
  },
  methods:{
    onDown(){
      console.log("onDown")
      let shiliTxt = document.querySelector("#shili").innerHTML
      const binaryData=[]
      binaryData.push(shiliTxt)
      const url = window.URL.createObjectURL(
        new Blob(binaryData,{
          type:'application/csv'
        })
      )
      let link = document.createElement('a')
      link.style.display="none"
      link.href=url
      link.setAttribute('download','shili.txt')
      document.body.appendChild(link)
      link.click()
      window.URL.revokeObjectURL(url)
      
    }    
  }
}
</script>

每天记录一点，助力成长！

欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！