vue 常用案例

最新推荐文章于 2024-07-06 16:47:02 发布

狂扇哑巴好嘴

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量30

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_64750932/article/details/135929340

版权

文章介绍了在Vue项目中实现打印按钮功能以及将表格数据导出为Excel文件的示例，展示了如何使用`window.print()`和`file-saver`/`xlsx`库来完成操作。

摘要由CSDN通过智能技术生成

`vue案例`

`vue打印`

<template>
	<div class="container">
        <button class="print">打印</button>
        ...
    </div>
</template>

<script>
	export default{
        data() {
            
        },
        methods: {
            Print() {
                const content = wondow.document.body.innerHTML;
                window.document.body.innerHTML = content;
                window.print()
            }
        }
    }
</script>

<style scope>
    @media print{
        /* 打印时使用媒体查询设置打印时的样式 */  
    }
</style>

`vue` `table` 导出 `EXCEL` 文件格式

<template>
	<div class="container">
        <button class="Export">导出</button>
        <table id="tab02">
            <tr>
    			<td></td>
    		</tr>
    	</table>
    </div>
</template>

<script>
    // 使用插件 file-saver xlsx
    import { saveAs } from "file-saver";
	import * as XLSX from "xlsx";
	export default{
        methods: {
            Export() {
                const t = this
                const table = document.getElementBtId('tab02');
                const content = XLSX.utils.table_to_book(table);
                const write = XLSX.write(content, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                });
                try{
                    saveAs(
                    	new Blob([write], {type: "application/octet-stream"}),
                        `${new Date().getTime()}.xlsx`
                    );
                } catch (e) {
                    if(typeof console !== "undefined") console.log(e, write);
                }
                return write;
            }
        }
    }
</script>