胡光喆

Fail fast, learn faster~

胡光喆

The best code is no code at all

在前端开发中,偶尔会遇到导出页面为图片(或海报)或者PDF这种常见需求,大多数是直接获取DOM,然后通过htm2canvas库(导出pdf的话还需要加上pdf.js库)导出,但是大部分直接导出样式总会出点问题(比如行高不对,样式错乱等),另外想在导出的页面中加一些图片或者其他元素,有些不方便。所以我这边思路是重新开一个导出组件,用来放要导出的元素,以及要额外放的一些内容(也就是在保留原有页面的基础上,基于业务数据新写一个...);下面使用htm2canvas导出图片,使用pdf.js导出为pdf

# 效果展示:需要导出的页面

在这里插入图片描述

# 效果展示:导出效果预览

在这里插入图片描述

10/11/2024 Vue

Webpack平时在做业务开发的时候很少去改这块配置,时间久了,很多东西都忘了,所以准备从0搭建一下,熟悉下

7/28/2024 Vue

在项目build打包之后会有一个chunk-vendors.js文件包,该模块通常是我们装的node_modules依赖包,包含了引用的所有的第三方包(默契像Vue CLI一般默认使用了Tree Shaking配置【可以去除一些没引用的包】),所以有时候项目用的插件较多时chunk-vendors.js会比较大,为了提高首屏首次加载速度,这里做一个分包,能够较大提升加载速度

7/18/2024 VueWebpack性能优化

Webpack 中,loader 和 plugin 是两个核心概念,分别用于处理相关模块和扩展 Webpack 的功能

7/18/2024 Vue

v-clickoutside快捷指令,点击当前DOM之外的区域触发

7/18/2024 VueFaster Demos

HTTP是用于在Web浏览器和Web服务器之间传输数据的基础协议

7/16/2024 Http

创建一个WebSocket服务文件,用于封装WebSocket的相关操作

6/12/2024 Websocket

面向过程POP就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。 面向对象OOP是把事务分解成为一个个对象,然后由对象之间分工与合作。

11/10/2020 JavaScriptES6
author-avatar

huguangzhe

8

Articles

10

Tags

Categories


Tags

AllJavaScriptES6HttpVueFaster DemosWebsocketVueRouterWebpack性能优化Vuex

Friend Links