胡光喆

Fail fast, learn faster~

vuePress-theme-reco huguangzhe    2025
胡光喆 胡光喆

Choose mode

  • dark
  • auto
  • light
主页
分类
  • JavaScript
  • Vue
  • Webpack
标签
工具箱
  • 笔记
时间线
关于
  • 关于我
  • 简历
author-avatar

huguangzhe

9

Articles

11

Tags

    主页
    分类
    • JavaScript
    • Vue
    • Webpack
    标签
    工具箱
    • 笔记
    时间线
    关于
    • 关于我
    • 简历

    Vue Categories

    vuePress-theme-reco huguangzhe    2025
    • JavaScript 3
    • Vue 5
    • Webpack 3
    前端方案/导出DOM元素为图片或PDF(类海报)

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

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

    在这里插入图片描述

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

    在这里插入图片描述

    huguangzhe 10/11/2024 Vue
    熟悉下webpack的一些知识点,从0搭建webpack

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

    huguangzhe 7/28/2024 Vue
    关于性能优化之分包

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

    huguangzhe 7/18/2024 VueWebpack性能优化
    关于Webpack之Loader/Plugin

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

    huguangzhe 7/18/2024 Vue
    工作提效/v-clickoutside快捷指令

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

    huguangzhe 7/18/2024 VueFaster Demos
    Prev 1 ... 1 ... 1 Next Jump To Go