欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue2實(shí)現(xiàn)txt文件在線預(yù)覽的代碼示例

 更新時間：2025年01月02日 11:47:51   作者：_Feliz  
txt文件在線預(yù)覽不需要下載另外的插件,主要有兩種形式,一種是上傳完成后實(shí)現(xiàn)預(yù)覽；另一種是后端提供文件下載接口,獲取文件在線地址實(shí)現(xiàn)預(yù)覽；本文給大家介紹了Vue2實(shí)現(xiàn)txt文件在線預(yù)覽的代碼示例,需要的朋友可以參考下

一、上傳完成后實(shí)現(xiàn)預(yù)覽

<template>
  <!-- txt文件預(yù)覽 -->
  <div>
    <el-dialog
      title="文件預(yù)覽"
      :visible="dialogVisible"
      show-close
      append-to-body
      width="60%"
      :before-close="cancelDialog"
    >
      <input type="file" @change="handleFileChange">
      <div class="panel-box" v-html="txt"></div>
      <div slot="footer" class="dialog-footer tc">
        <button class="btn-submit btn-submit-sm" @click="cancelDialog()">關(guān)閉</button>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  name:'txtFilePreview',
  data() {
    return {
      dialogVisible:false,
      txt:'',
    };
  },
  methods: {
    previewFile(){
      this.dialogVisible = true;
    },
    handleFileChange(e){
      const file = e.target.files[0];
      if (!file) {
        return;
      }
      const that = this;
      const reader = new FileReader();
      reader.onload = function(e) {
        that.txt = e.target.result.split('\n').join('<br />');
      };
      reader.onerror = function(error) {
        console.error('Error: ', error);
      };
      reader.readAsText(file);
    },
    cancelDialog(){
      this.dialogVisible = false;
    },
  }
};
</script>
 
<style lang="scss" scoped>
</style>

實(shí)現(xiàn)效果：

二、后端提供文件下載接口實(shí)現(xiàn)預(yù)覽

<template>
  <!-- txt文件預(yù)覽 -->
  <div>
    <el-dialog
      title="文件預(yù)覽"
      :visible="dialogVisible"
      show-close
      append-to-body
      width="60%"
      :before-close="cancelDialog"
    >
      <div class="panel-box" v-html="txt"></div>
      <div slot="footer" class="dialog-footer tc">
        <button class="btn-submit btn-submit-sm" @click="cancelDialog()">關(guān)閉</button>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  name:'txtFilePreview',
  data() {
    return {
      dialogVisible:false,
      txt:'',
    };
  },
  methods: {
    previewFile(event,docId) {
      event.stopPropagation();
      this.dialogVisible = true;
      const inParam = {
        DOC_ID: docId,
        STAFF_ID: this.$store.getters.staffId,
        STAFF_NAME: this.$store.getters.staffName,
        SYS_USER_CODE: this.$store.getters.systemUserCode
      };
      const loading = this.$commonUtil.loading.open()
      this.$txtPreview(this.mciApi.common.file.downFile, { ...inParam }).then(r => {
        loading.close()
        // 根據(jù)文件地址解析txt文件內(nèi)容
        this.$axios.get(r,{
          responseType:"blob",
          transformResponse: [
            async (data)=>{
              return await this.transformData(data);
            },
          ],
        }).then(res=>{
          res.data.then((data)=>{
            this.txt = data ? data.split('\n').join('<br />') : '';
          })
        })
      }).catch((e) => {
        loading.close()
      })
    },
    transformData(data){
      return new Promise((resolve)=>{
        let reader = new FileReader();
        reader.readAsText(data,'UTF-8');
        reader.onload = ()=>{
          resolve(reader.result)
        }
      })
    },
    cancelDialog(){
      this.dialogVisible = false;
    },
  }
};
</script>
 
<style lang="scss" scoped>
</style>

Tips：

$txtPreview：是封裝后的post請求；

this.mciApi.common.file.downFile：是后端提供的文件下載方法，返回一個文件流數(shù)據(jù)。獲取數(shù)據(jù)后將文件流進(jìn)行地址轉(zhuǎn)換作為結(jié)果返回。

 文件流轉(zhuǎn)url地址：

const blob = new Blob([content], { type: 'application/text' });
const url = window.URL.createObjectURL(blob);

實(shí)現(xiàn)效果：

到此這篇關(guān)于Vue2實(shí)現(xiàn)txt文件在線預(yù)覽的代碼示例的文章就介紹到這了,更多相關(guān)Vue2 txt文件在線預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論