1. 程式人生 > 其它 >vue中匯出文字,非外掛的方法

vue中匯出文字,非外掛的方法

匯出文字,一般分為兩種

1.外掛的方法
2.非外掛的方法

使用非外掛的方法

  //匯出文字
    exportText() {
      const blob = new Blob([ this.$refs.txt.value])
      let date=new Date();
      const fileName = '識別文字'+this.$options.filters['dateformat'](date)+'.txt'
      const link = document.createElement('a') // 建立a標籤
      link.download = fileName // a標籤新增屬性
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      document.body.appendChild(link)
      link.click() // 執行下載
      URL.revokeObjectURL(link.href) // 釋放url
      document.body.removeChild(link) // 釋放標籤
    },

this.$refs.txt.value,只能獲取文字內容。如果,是帶有html標籤,那就沒得搞了。

外掛得方法。

首先安裝 FileSaver包,npm install file-saver --save
在main.js中引入 import {saveAs} from 'file-saver';
將字串轉為Blob物件

let str = new Blob(['要匯出的字串'], {type: 'text/plain;charset=utf-8'});
saveAs(str, `匯出檔案時的名字.txt`);

注意這裡要手動寫上檔案的字尾名