Vue 导出excel,pdf(本地下载)；元素转成base64图片(纯前端实现)

vue导出excel文件

下载FileSaver XLSX两个依赖包

npm install FileSaver --save
npm install XLSX --save

在需要用的页面引入

import FileSaver from "file-saver"
import XLSX from "xlsx"

			//搭配element-ui
			var fix = document.querySelector('.el-table__fixed');
            var wb;
            if (fix) {
                // 如果有fixed，先移除，然后再添加上
                wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix))
                document.querySelector("#out-table").appendChild(fix)
            } else {
                wb = XLSX.utils.table_to_book(document.querySelector("#out-table"))
            }
            var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: "application/octet-stream"
                    }),
                    // 导出的文件名称
                    "Data.xlsx"
                )

            } catch (e) {

                if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;

vue导出pdf文件

下载htmlToPdf依赖包

npm htmlToPdf XLSX --save

页面引入

import offerApi from '@/api/offer';
import htmlToPdf from '@/utils/htmlToPdf';

代码

//#pdf是自己需要导出的元素id名 
//offer.pdf是导出的文件名
htmlToPdf.downloadPDF(document.querySelector('#pdf'), 'offer.pdf');

vue导出base64图片文件

下载html2canvas依赖包

npm html2canvas FileSaver --save

页面引入

  import html2canvas from 'html2canvas'

代码

html2canvas(this.$refs.png, {})
          .then((canvas) => {
            console.log(canvas)
            let imageUrl = canvas.toDataURL('image/png'); // 将canvas转成base64图片格式
             //imageUrl就是base64格式的图片
          });