vue 圖片轉base64格式方法+將base64流數據轉成pdf文件可打印的方法✔️✔️✔️

1. 圖片轉base64格式方法

（主要的代碼）（其實用的還是FileReader）

handleRemove(file, fileList) {
      console.log(file); 
      
      var reader = new FileReader();
      reader.readAsDataURL(file.raw); // 一定要傳入file格式  
      reader.onload = () => {
        console.log("file 轉 base64結果：" + reader.result);
      };
      reader.onerror = function(error) {
        console.log("Error: ", error);
      };
},

vue組件-頁面中code

<!--  -->
<template>
  <div>
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-change="handleRemove"
      multiple
      :limit="3"
    >
      <el-button size="small" type="primary">點擊上傳</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file);
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        console.log("file 轉 base64結果：" + reader.result);
      };
      reader.onerror = function(error) {
        console.log("Error: ", error);
      };
    },
  }
};
</script>
<style scoped>
/* @import url(); 引入css類 */
</style>

注意：
今天在使用Vue進行文件上傳的代碼編寫時，發現報錯

 

顯然，是傳入的file對象出了問題，根據報錯提示，我們應該傳入一個Blob對象。也就是說，file不是Blob對象

我們使用console.log(file)進行調試輸出

看, raw這個屬性寫了個大大的File

把raw這個File對象傳入即可===OK啦！！！

2. 將base64流數據轉成pdf文件可打印

這次後端返參不是oss那邊傳回來的，而是傳給我一串base64編碼的字符串，讓我去生成可打印的pdf，返參如下所示。

 

2.1 base編碼轉爲pdf方法

atob() 方法可用於解碼base-64 編碼的字符串，再通過Blob將Uint8Array數組轉換成pdf類型的文件對象

    // content是base64格式
    viewPdf(content) {
      console.log("content",content);
      const blob = this.base64ToBlob(content);
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob);
      } else {
        const fileURL = URL.createObjectURL(blob);
        window.open(fileURL);//打開ppf文件
      }
    },
    base64ToBlob(code) {
      code = code.replace(/[\n\r]/g, '');// 檢查base64字符串是否符合base64編碼
      // atob() 方法用於解碼使用 base-64 編碼的字符串。
      const raw = window.atob(code);
      const rawLength = raw.length;
      const uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
      // 將解碼後的逐個字符轉換成Unicode序號，放入Unit8Array數組
        uInt8Array[i] = raw.charCodeAt(i);
      }
      // 通過Blob將Uint8Array數組轉換成pdf類型的文件對象
      return new Blob([uInt8Array], { type: 'application/pdf' });
    },

2.2 打印方法

再寫個打印方法，調接口獲取返回的base64編碼字符串，再去調用上面base64轉爲pdf的方法

	// 點擊打印
    handlePrint() {
      let params = {
        deliveryNoteNoList: this.deliveryNoteNoList
      };
      this.$requestFn("POST", this.$url.dispatch.printDeliveryNote, params).then((res) => {
        if(res && res.deliverNoteBase64List[0]){
          this.viewPdf(res.deliverNoteBase64List[0]);
        }
      });
    },

接着就可實現效果了，如下圖所示