Shulou(Shulou.com)06/02 Report--

This article mainly explains the "vue how to use file-saver local file export function", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "how to use file-saver local file export function in vue" bar!

1: install xlsx and file-saver

Npm install file-saver xlsx-save

2: create localExports.js file 3: code import XLSX from 'xlsx';const FileSaver = require (' file-saver') directly; import {getRandomNum} from'@ / utils' / / Local export form / * Export Excel file * @ param {*} elementName table component id name * @ param {*} fileName file name * @ description instructions * import {exportsXlsx} from'@ / utils/localExports'; * exportsXlsx ('idName',' file name') * / export function exportsXlsx (elementName, fileName) {const time = new Date (). GetTime (); const random = getRandomNum (100,1000); const wb = XLSX.utils.table_to_book (clearHead (elementName), {raw: true}); const wbout = XLSX.write (wb, {bookType: 'xlsx', bookSST: true, type:' array'}) FileSaver.saveAs (new Blob ([wbout], {type: 'application/octet-stream'}), `${fileName} ${time}-${random} .xlsx`);} function clearHead (elementName) {const tableDom = document.querySelector (' #'+ elementName) .cloneNode (true); const tableHeader = tableDom.querySelector ('.el-table__header-wrapper'); const tableBody = tableDom.querySelector (' .el-table__body'); tableHeader.childNodes [0] .append (tableBody.childNodes [1]) Const headerDom = tableHeader.childNodes [0] .querySelectorAll ('th'); / / remove the node if of the left checkbox (headerDom [0] .querySelectorAll ('. El-checkbox')) {headerDom [0] .remove ();} for (const key in headerDom) {if (headerDomkey] .innerText = = 'Operation') {headerDomkey] .remove () }} / / button const tableList = tableHeader.childNodes [0] .childNodes [2] .querySelectorAll ('td') for checkbox and operation; for (let key = 0; key)

0 | | tableList [key] .querySelectorAll ('. El-button'). Length > 0) {tableList [key] .remove ();}} return tableHeader;} 4: usage import {exportsXlsx} from'@ / utils/localExports';methods: {onSearch () {exportsXlsx ('good',' simulated data') },} the id,getRamdomNum method in which 5:good is a table component is as follows / / generate random numbers export function getRandomNum (Min, Max) {var Range = Max-Min; var Rand = Math.random (); return (Min + Math.round (Rand * Range)) Thank you for your reading, the above is the content of "how to use file-saver local file export function in vue". After the study of this article, I believe you have a deeper understanding of how to use file-saver local file export function in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.