Vue：a标簽點選和file-saver實作檔案下載下傳

方式一：a标簽點選實作

<template>
  <div class="">
    <el-button
      size="small"
      @click="downloadFile"
    >儲存檔案</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      var blob = new Blob(['Hello, world!'], {
        type: 'text/plain;charset=utf-8',
      });

      // 存在浏覽器相容性
      let href = URL.createObjectURL(blob);

      let alink = document.createElement('a');
      alink.style.display = 'none';
      alink.download = '檔案名.txt'; //下載下傳後檔案名
      alink.href = href;
      document.body.appendChild(alink);
      alink.click();
      document.body.removeChild(alink); //下載下傳完成移除元素
      
      URL.revokeObjectURL(href); //釋放掉blob對象
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
           

方式二：file-saver實作儲存

文檔：https://www.npmjs.com/package/file-saver

npm i file-saver
           

FileSaver saveAs(Blob/File/Url, 
	optional DOMString filename, 
	optional Object { autoBom }
	)
           

<template>
  <div class="">
    <el-button
      size="small"
      @click="saveFile"
    >儲存檔案</el-button>
  </div>
</template>

<script>
/**
 * 檔案儲存
 */
import FileSaver from 'file-saver';

export default {
  methods: {
    saveFile() {
      var blob = new Blob(['Hello, world!'], {
        type: 'text/plain;charset=utf-8',
      });
      FileSaver.saveAs(blob, '檔案名.txt');
    },
  },
};
</script>

<style lang="scss" scoped>
</style>