前言

---

本专题主要记录项目问题，帮助后续整理和加强记忆（最近忙项目）。

一、html元素转换成图片保存

---

问题背景

项目需求里需要右键将一个html元素（海报）右键存为图片。一个简单需求，但是不经常使用。

具体解决

这里我选择借助html2canvas插件帮助实现。
首先项目安装html2canvas插件：cnpm install --save ``html2canvas
其次页面引入模块：import ``html2Canvas from 'html2Canvas'
具体方法如下：

//html结构
<div id="pic"></div>
//js方法
exportPic(DivID){
    html2Canvas(document.querySelector('#pic').then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        if (dataURL !== "") {
            var a = document.createElement('a')
            a.download = "XX图片";
            a.href = dataURL;
            a.click()
        }
    })
}

二、vue的img标签浏览器解析问题

---

问题描述

在开发者模式下发现了有些图片会被转成base64，而有些还是静态地址，经过了解原来是webpack对转换的图片大小有大小限制。
可以在vue.config.js里修改下对图片的大小限制。

  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => Object.assign(options, { limit: 20000 }))
  }

三、el-table的prop属性特殊符号问题

---

项目背景

最近做的是报表项目，其中会有多级表头的情况，我需要根据后端返回的数据，生成表头数据tableData和表格对应的填充数据tableMessage。tableMessage是一个对象数组，根据该列表头的prop对应每个对象的key来展示。

问题

当表头有创建时间这类数据的时候prop明明在tableMessage的每个对象里都有值，但是不显示。一开始觉得可能是太长导致的，因为为了确保每列的prop都是唯一的，我是用他所有的祖先表头数据合成的。如2021-63-12TO7:51:20.a60+00 :00销售价。于是我试了个更长的69246865880022021-11-81 14: 25:84销售价发现还是可以展示。
于是我就开始找不同了，最后排除了空格，+ - ：等字符，直到遇到了小数点，把它删除之后，表格终于可以展示该列数据了。

总结

el-table的prop值不要带有小数点

四、引入阿里巴巴矢量图标库无效

Iconfont介绍

Iconfont 是采用字体的方式来做图标，它不但可以提高网页性能也能适用在 iOS 和 Android App 平台。再加上现在扁平化设计席卷互联网，它变得越来越流行。它的原理就是将很多 icon 做成字体库，通过样式或者字体对应的字符集来显示这个 icon。阿里巴巴矢量图标库就是一个比较常用的iconfont平台。

项目背景

在项目中我们可以通过引入iconfont帮助引入一些图标，这次修改同事项目时，发现引入无效。

问题排查和修复

经过对比，发现他修改了生成的iconfong.css里的类名 iconfont.css的类名需要在引用在class中添加例如 iconfont。