vue打印 导出

vue打印 导出"/>

vue打印 导出

1.原生打印 window.print()

//js方法
printFun(){const divContents = document.querySelector('#addMixing').innerHTML; //打印区域//const originalContents = document.body.innerHTML;const printDiv = document.createElement('div');printDiv.innerHTML = divContents;printDiv.style.position = 'fixed';printDiv.style.top = 'g';printDiv.style.left = '0';printDiv.style.right = 'g';printDiv.style.width = '100%';printDiv.style.height = '100%';printDiv.style.zIndex = '999';printDiv.style.background = '#fff';printDiv.style.overflow = 'auto';document.body.appendChild(printDiv);window.print(); // 调用浏览器自带的打印功能document.body.removeChild(printDiv);// 不加，打印按钮只能按一次，1+次不生效不知道为啥}

<!--html 按钮-->
<el-button class="btnn" @click="printFun">打印</el-button>
<div id="addMixing" style="width: 100%; height: 100%"><div class="addMixing"></div>
</div>
<!--要打印区域是.addMixing -->
<!--外面套一层#addMixing盒子就会保证里面盒子打印样式 -->

2.导出

2.1后端数据为2进制

//request.js---------------------------------------------------------------------------
import axios from 'axios'
const mode = import.meta.env.MODE
const service = axios.create({timeout: 10000,withCredentials: true
})service.interceptors.request.use((config) => {let baseURL = config.url.indexOf('admin') > -1 ? '/frame' : '/remote'config['baseURL'] = mode === 'production' ? 'http://124.126.17.220:35335' : baseURLreturn config},(error) => {console.log(error);return Promise.reject();}
);service.interceptors.response.use((response) => {// 判断是不是 Blobif (response.config.responseType === 'blob') {return response}if (response.status === 200 || response.data.code === 200 || response.data.code === 0) {return response.data} else {Promise.reject(response)return response}},(error) => {return Promise.reject(error)}
);
service.all = axios.all;
window.$axios = service;//api.js------------------------------------------------------------------------------
export function safeExport (params) {return window.$axios.post('/mortar/safeStatistical/safeExport', params, {responseType: 'blob'})
}
//应用-------------------------------------------------------------------------------
import FileSaver from 'file-saver' // 插件引入
import * as API from "@/api/service.js"; // api引入
// methods-------------------------------------------------------
async exportFun(){console.log(this.filter);let params = Object.assign({}, this.filter, {"orgId":this.filterId,  //组织机构id"orgName":this.filterName,                               //组织机构名称"startTime":this.filter.startTime,                        //开始时间"endTime":this.filter.endTime})API.safeExport(params).then( res => {FileSaver.saveAs(new Blob([res.data], { type: 'application/octet-stream' }),'安全统计分析.xlsx')})},

2.2 页面标签导出