国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

VUE通用后臺(tái)管理系統(tǒng)（四）前端導(dǎo)出文件（CSV、XML、HTML、PDF、EXCEL）

2年前作者：前端（從入門到入土）分類：Toy博客閱讀(56)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了VUE通用后臺(tái)管理系統(tǒng)（四）前端導(dǎo)出文件（CSV、XML、HTML、PDF、EXCEL）。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

常見(jiàn)的導(dǎo)出格式：CSV、XML、HTML、PDF、EXCEL

1）準(zhǔn)備工作

安裝所需相關(guān)依賴

npm i html2canvas --save
npm i jspdf --save

npm i xlsx --save
npm i file-saver --save

前兩個(gè)是PDF格式需要的依賴，后兩個(gè)是excel格式所需，如果沒(méi)有需求這兩種格式的可以忽略這一步

然后畫頁(yè)面

vue導(dǎo)出csv文件,VUE通用后臺(tái)管理系統(tǒng),前端,vue.js,javascript

?vue導(dǎo)出csv文件,VUE通用后臺(tái)管理系統(tǒng),前端,vue.js,javascript

頁(yè)面效果

vue導(dǎo)出csv文件,VUE通用后臺(tái)管理系統(tǒng),前端,vue.js,javascript

2）導(dǎo)出CSV格式的文件

新建src/utils/utils.js文件

寫入exportCsv方法，columns為表頭，dataList數(shù)據(jù)，filename導(dǎo)出文件名稱

// 導(dǎo)出csv
export function exportCsv(columns, dataList, fileName) {
  let title = columns.map(item => item.title);
  let keyArray = columns.map(item => item.key);
  let str = [];
  str.push(title.join(',') + '\n');
  for (let i = 0; i < dataList.length; i++) {
    const temp = [];
    for (let j = 0; j < keyArray.length; j++) {
      temp.push(dataList[i][keyArray[j]]);
    }
    str.push(temp.join(',') + '\n');
  } 
  console.log(str)
  let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str.join(''));
  let downloadLink = document.createElement('a');
  downloadLink.href = uri;
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

頁(yè)面使用

先引人方法

import { exportCsv, exportXml, exportHtml, exportPDF, exportExcel } from "@/utils/utils"

再調(diào)用

    handleExprotData() {
        //表頭
      let allColumns = []
      this.$refs.singleTable.$children.forEach(obj => {
        if (obj.label !== undefined && obj.prop !== undefined) {
          allColumns.push({ "title": obj.label, "key": obj.prop })
        }
      })

      //this.checkboxList是勾選的需要導(dǎo)出的數(shù)據(jù)
      console.log(JSON.parse(JSON.stringify("allColumns -----------" , allColumns)))
      console.log(JSON.parse(JSON.stringify("this.checkboxList ----------------" , this.checkboxList)))
      this.exportForm.exportFormat == 0 && exportCsv(allColumns, this.checkboxList, "CP信息");

}

vue導(dǎo)出csv文件,VUE通用后臺(tái)管理系統(tǒng),前端,vue.js,javascript

效果

vue導(dǎo)出csv文件,VUE通用后臺(tái)管理系統(tǒng),前端,vue.js,javascript

3）導(dǎo)出XML格式的文件

在utils.js寫入

// 導(dǎo)出xml格式
export function exportXml(columns, dataList, fileName) {
  let str = '<?xml version="1.0" encoding="utf-8" ?>\n<dataSource>\n';
  dataList.forEach(dataItem => {
    str += `<dataItem>\n`;
    columns.forEach(columnsItem => {
      str += `<${columnsItem.key}>${dataItem[columnsItem.key]}</${columnsItem.key}>\n`;
    });
    str += `</dataItem>\n`;
  });
  str += '</dataSource>';
  let downloadLink = document.createElement('a');
  let uri = window.URL.createObjectURL(new Blob([str], { type: 'text/plain;charset=utf-8,\ufeff' }));
  downloadLink.href = uri;
  downloadLink.download = `${fileName}.xml`;
  downloadLink.click();
  window.URL.revokeObjectURL(uri);
}

然后再頁(yè)面引入、調(diào)用，和csv格式一樣

    handleExprotData() {
        //表頭
      let allColumns = []
      this.$refs.singleTable.$children.forEach(obj => {
        if (obj.label !== undefined && obj.prop !== undefined) {
          allColumns.push({ "title": obj.label, "key": obj.prop })
        }
      })

      //this.checkboxList是勾選的需要導(dǎo)出的數(shù)據(jù)
      console.log(JSON.parse(JSON.stringify("allColumns -----------" , allColumns)))
      console.log(JSON.parse(JSON.stringify("this.checkboxList ----------------" , this.checkboxList)))
      this.exportForm.exportFormat == 0 && exportCsv(allColumns, this.checkboxList, "CP信息");
      this.exportForm.exportFormat == 1 && exportXml(allColumns, this.checkboxList, "CP信息");

}

效果

vue導(dǎo)出csv文件,VUE通用后臺(tái)管理系統(tǒng),前端,vue.js,javascript

4）導(dǎo)出HTML格式的文件

// 導(dǎo)出html格式
export function exportHtml(columns, dataList, fileName) {
  let str = '<table border="1" style="border-collapse: collapse;min-width:80%;margin:0 10%;">\n';
  columns.forEach(columnsItem => {
    str += `<th>${columnsItem.title}</th>\n`;
  });
  dataList.forEach(dataItem => {
    str += `<tr>\n`;
    columns.forEach(columnsItem => {
      str += `<td>${dataItem[columnsItem.key]}</td>\n`;
    });
    str += `</tr>\n`;
  });
  str += '</table>';
  let html = `<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <h2 style="text-align:center">
        ${fileName}
      </h2>
      <div style="width:100%">
        ${str}
      </div>
    </body>
    </html>`;

  let downloadLink = document.createElement('a');
  let uri = window.URL.createObjectURL(new Blob([html], { type: 'text/html;charset=utf-8,\ufeff' }));
  downloadLink.href = uri;
  downloadLink.download = `${fileName}.html`;
  downloadLink.click();
  window.URL.revokeObjectURL(uri);
}

頁(yè)面引入，調(diào)用

頁(yè)面上加一行

this.exportForm.exportFormat == 2 && exportHtml(allColumns, this.checkboxList, "CP信息");

就可以了

效果

vue導(dǎo)出csv文件,VUE通用后臺(tái)管理系統(tǒng),前端,vue.js,javascript

5）導(dǎo)出PDF格式的文件

utils引入依賴

import html2canvas from 'html2canvas';
import { jsPDF } from "jspdf"
// 導(dǎo)出pdf格式
export function exportPDF(columns, dataList, fileName) {
  let str = '<table border="1" style="border-collapse: collapse;min-width:80%;margin:0 10%;">\n';
  columns.forEach(columnsItem => {
    str += `<th>${columnsItem.title}</th>\n`;
  });
  dataList.forEach(dataItem => {
    str += `<tr>\n`;
    columns.forEach(columnsItem => {
      str += `<td>${dataItem[columnsItem.key]}</td>\n`;
    });
    str += `</tr>\n`;
  });
  str += '</table>';
  let ele = document.createElement('div');
  ele.innerHTML = `<h2 style="text-align:center">
    ${fileName}
  </h2>
  <div style="width:100%">
    ${str}
  </div>`;
  document.body.appendChild(ele);

  // var w = ele.offsetwidth; //獲得該容器的寬
  // var h = ele.offsetwidth; //獲得該容器的高
  // var offsetTop = ele.offsetTop + 24; //獲得該容器到文檔頂部的距離
  // var offsetLeft = ele.offsetLeft + 24; //獲得該容器到文檔最左的距離
  var w = 960; //獲得該容器的寬
  var h = 1024; //獲得該容器的高
  var offsetTop = 24; //獲得該容器到文檔頂部的距離
  var offsetLeft = 24; //獲得該容器到文檔最左的距離

  var canvas = document.createElement('canvas');
  var abs = 0;
  var win_i = document.body.clientwidth; //獲得當(dāng)前可視窗口的寬度（不包含滾動(dòng)條)
  var win_o = window.innerwidth; //獲得當(dāng)前窗口的寬度（包含滾動(dòng)條)
  if (win_o > win_i) {
    abs = (win_o - win_i) / 2; //獲得滾動(dòng)條長(zhǎng)度的—半
  }
  canvas.width = w * 2; //將回布寬&&高放大兩倍
  canvas.height = h * 2;
  var context = canvas.getContext('2d');
  context.scale(2, 2);
  context.translate(-offsetLeft - abs, -offsetTop);
  //這里默認(rèn)橫向沒(méi)有滾動(dòng)條的情況，因?yàn)閛ffset.Left(),有無(wú)滾動(dòng)條的時(shí)候存在差值，因此 transLate的時(shí)候，要把這個(gè)差值去掉
  html2canvas(ele, {
    allowTaint: true,
    scale: 2, //提升畫面質(zhì)量，但是會(huì)增加文件大小
  }).then(function(canvas) {
    var contentwidth = canvas.width;
    var contentHeight = canvas.height;
    //一頁(yè)pdf顯示htmL頁(yè)面生成的canvas高度;
    var pageHeight = (contentwidth / 592.28) * 841.89;
    //未生成pdf 的htmL頁(yè)面高度
    var leftHeight = contentHeight;
    //頁(yè)面偏移
    var position = 0;
    //a4紙的尺寸[ 595.28,841.89]，html頁(yè)面生成的canvas在pdf中圖片的寬高
    var imgwidth = 595.28;
    var imgHeight = (592.28 / contentwidth) * contentHeight;
    var pageData = canvas.toDataURL(' image/jpeg ', 1.0);
    var pdf = new jsPDF('', 'pt', 'a4');
    console.log(pdf);
    //有兩個(gè)高度需要區(qū)分，一個(gè)是htmL頁(yè)面的實(shí)際高度，和生成pdf的頁(yè)面高度(841.89) 當(dāng)內(nèi)容未超過(guò)pdf—頁(yè)顯示的范圍，無(wú)需分頁(yè)
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 0, 0, imgwidth, imgHeight);
    } else {
      //分頁(yè)
      while (leftHeight > 0) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgwidth, imgHeight);
        leftHeight -= pageHeight;
        position -= 841.89;
        //避免添加空白頁(yè)
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    pdf.save(`${fileName}.pdf`);
    document.body.removeChild(ele);
  });
}
const s2ab = s => {
  var buf;
  if (typeof ArrayBuffer !== 'undefined') {
    buf = new ArrayBuffer(s.length)
    var view = new Uint8Array(buf)
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
    return buf
  } else {
    buf = new Array(s.length);
    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}

?頁(yè)面引入、調(diào)用

this.exportForm.exportFormat == 3 && exportPDF(allColumns, this.checkboxList, "CP信息");

效果

vue導(dǎo)出csv文件,VUE通用后臺(tái)管理系統(tǒng),前端,vue.js,javascript

?6）導(dǎo)出EXCEL格式的文件

引入依賴

import * as XLSX from 'xlsx'
import fs from 'file-saver'
// 導(dǎo)出excel格式
export function exportExcel(columns, dataList, filename) { 
  dataList.forEach(item => {
    for (let i in item) {
      if (columns.hasOwnProperty(i)) {
        item[columns[i]] = item[i];
      }
      delete item[i]; //刪除原先的對(duì)象屬性
    }
  })
  let sheetName = filename + ".xlsx" //excel的文件名稱
  console.log(sheetName)
  let wb = XLSX.utils.book_new() //工作簿對(duì)象包含一SheetNames數(shù)組，以及一個(gè)表對(duì)象映射表名稱到表對(duì)象。XLSX.utils.book_new實(shí)用函數(shù)創(chuàng)建一個(gè)新的工作簿對(duì)象。
  console.log(wb)
  let ws = XLSX.utils.json_to_sheet(dataList, {
    header: Object.values(columns)
  }) //將JS對(duì)象數(shù)組轉(zhuǎn)換為工作表。
  wb.SheetNames.push(sheetName)
  wb.Sheets[sheetName] = ws
  const defaultCellStyle = {
    font: {
      name: "Verdana",
      sz: 13,
      color: "FF00FF88"
    },
    fill: {
      fgColor: {
        rgb: "FFFFAA00"
      }
    }
  }; //設(shè)置表格的樣式
  let wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
    cellStyles: true,
    defaultCellStyle: defaultCellStyle,
    showGridLines: false
  } //寫入的樣式
  let wbout = XLSX.write(wb, wopts)
  let blob = new Blob([s2ab(wbout)], {
    type: 'application/octet-stream'
  })
  fs.saveAs(blob, filename + '.xlsx')
}

這個(gè)頁(yè)面調(diào)用與別的格式不同

      //excel格式專用表頭
      if (this.exportForm.exportFormat == 4) {
        let excelColumns = {}
        this.$refs.singleTable.$children.forEach(obj => {
          if (obj.label !== undefined && obj.prop !== undefined) {
            excelColumns[obj.prop] = obj.label
          }
        })
        exportExcel(excelColumns, this.checkboxList, "CP信息");
        return
      }

效果看著與csv文件一樣的文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-744337.html

到了這里，關(guān)于VUE通用后臺(tái)管理系統(tǒng)（四）前端導(dǎo)出文件（CSV、XML、HTML、PDF、EXCEL）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包