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]);
        }
      });
    },

接着就可实现效果了，如下图所示