| | |
| | | <template> |
| | | <div> |
| | | <div v-if="isImage"> |
| | | <img :src="fileUrl" alt="Image Preview" /> |
| | | <img :src="imgUrl" alt="Image Preview" /> |
| | | </div> |
| | | <div v-if="isPdf"> |
| | | <object :data="fileUrl" type="application/pdf" width="100%" height="600px"> |
| | | <object :data="fileUrl" type="application/pdf" width="100%" height="750px"> |
| | | <p>您的浏览器不支持 PDF 预览。<a :href="fileUrl">下载 PDF 文件</a></p> |
| | | </object> |
| | | </div> |
| | |
| | | import VueOfficeExcel from '@vue-office/excel' |
| | | //引入相关样式 |
| | | import '@vue-office/excel/lib/index.css' |
| | | import * as XLSX from "xlsx"; |
| | | export default { |
| | | components: { |
| | | VueOfficeDocx, |
| | |
| | | transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前,可通过transformData对即将渲染的数据及样式进行修改,此时每个单元格的text值就是即将渲染到页面上的内容 |
| | | }, |
| | | csvList:[],//csv文件数据 |
| | | imgUrl:'' |
| | | } |
| | | }, |
| | | computed: { |
| | | isImage() { |
| | | return /\.(jpg|jpeg|png|gif)$/i.test(this.fileUrl); |
| | | let state = /\.(jpg|jpeg|png|gif)$/i.test(this.fileUrl) |
| | | this.imgUrl = this.fileUrl |
| | | if(state){ |
| | | this.imgUrl = this.fileUrl.replaceAll('word', 'img') |
| | | } |
| | | return state; |
| | | }, |
| | | isPdf() { |
| | | return /\.pdf$/i.test(this.fileUrl); |
| | |
| | | column:[] |
| | | } |
| | | obj.tableData = this.formatCSVToTable(m.content.replaceAll('null',' ')) |
| | | // .replaceAll('MIN','=MIN').replaceAll('MAX','=MAX').replaceAll('AVERAGE','=AVERAGE') |
| | | for (let item in obj.tableData[0]) { |
| | | obj.column.push({ |
| | | label: item, |
| | |
| | | return obj |
| | | }) |
| | | this.csvList = arr |
| | | // console.log(333,this.csvList) |
| | | this.csvList.forEach(m=>{ |
| | | console.log(this.calculateFormulas(m.column,m.tableData)) |
| | | m.tableData = this.calculateFormulas(m.column,m.tableData) |
| | | }) |
| | | }).catch( err => { |
| | | console.log(err) |
| | | }) |
| | |
| | | } |
| | | } |
| | | return result |
| | | }, |
| | | /** |
| | | * 计算表格公式 |
| | | * |
| | | * @param tableHeaders 表头数据 |
| | | * @param tableData 表格数据 |
| | | */ |
| | | calculateFormulas(tableHeaders,tableData){ |
| | | // 生成 Excel Sheet 格式 |
| | | const sheetData = [tableHeaders.map(m=>m.label), ...tableData.map((row) => Object.values(row))]; |
| | | const worksheet = XLSX.utils.aoa_to_sheet(sheetData); |
| | | // 计算公式 |
| | | XLSX.utils.sheet_add_aoa(worksheet, [], { origin: -1 }); |
| | | const newSheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); |
| | | // 更新表头和表格数据 |
| | | tableData = newSheetData.slice(1).map((row) => |
| | | row.reduce((obj, value, index) => { |
| | | obj[newSheetData[0][index]] = value; |
| | | return obj; |
| | | }, {}) |
| | | ); |
| | | return tableData |
| | | }, |
| | | resetStyle(){ |
| | | const elements = document.querySelectorAll('[style*="pt"]'); |