vue项目开发中的进制转换步骤

1. 将图片格式转为base64格式

1. 创建一个图片加载器

const reader = new FileReader()

2. 指定加载的文件

reader.readAsDataURL(options.file) 其实这个options.file就是我们选择图片但是不能直接用图片的src属性

3. 监听加载完毕事件 js reader.onload=()=>{ this.imageUrl = reader.result //就是将加载完毕的数据重新赋值给响应式数据,这个reader.result就是加载完毕的数据 }

2. 将文件转化为咱们可以阅读的格式

1. 拿到上传文件 js const file = event.target.files[0]

2. 将上传的文件转为二进制数据流 * 2.1 创建一个文件加载器 js const reader = new FileReader() * 2.2 指定加载文件 js reader.readAsBinaryString(file) * 2.3监听加载完的事件 ```js reader.onload = ()=>{ // 此时加载完毕转化为二进制数据流的格式就是这个reader.result // console.log(reader.result)

   // 3. 将二进制数据流转化为json格式数据

   // 3.1 将二进制数据流转换为js格式 const box = XLSX.read(reader.result, { type: 'binary' })

   // 3.2 将工作表1拿出来 let res = box.Sheets['工作表1']

   // 3.3 将res转化一下格式转换为json格式 res = XLSX.utils.sheet_to_json(res)

   // 3.4 将res数据给到响应式数据，用于页面渲染 this.ImportData = res } ```

3. 文件导出的步骤

1. 下载第三方包js-export-excel js npm i js-export-excel

2. 将第三方包导入进来 js import ExportJsonExcel from 'js-export-excel'

3. 在defineComponent中的data中返回一个响应式数据并且在mounted中挂在，将对应的数据请求并赋值给响应式数据 js export default defineComponent({ data(){ return { exportData:[] } } }), mounted(){ exportData().then(res=>{ this.exportData = res.data }) }

4. 给按钮绑定一个点击事件并且在defineComponent中的methods中书写该方法 ```js exportExcel() {

   var option = {}; option.fileName = "excel";

   option.datas = [ { // 分表的源数据 sheetData: this.exportData, // 表格的名字 sheetName: "sheet", // 导出数据的属性名 sheetFilter: ["category", "originprice",'proname','desc'], // 导出数据的表头, 需要和数据的属性名一一对应 sheetHeader: ["产品分类", "产品价格", '产品名字','产品介绍'], // 每一列的宽度 columnWidths: [50, 100, 150, 200], },

   ];

   var toExcel = new ExportJsonExcel(option); //new toExcel.saveExcel(); //保存 } ```