前言

上海最近疫情严重，大家珍重。我们还好，只不过处于封控范围之内，足不出户，在家办公。今天主要讲一下web components，其实web components 封闭组件应用还是蛮广泛的，例如H5广告组件，H5封装音乐组件等等。

webComponents demo

自定义的 HTML 标签，称为自定义元素（custom element）。根据规范，自定义元素的名称必须包含连词线，用与区别原生的 HTML 元素。所以，不能写成。

前言

本文是js文件导出系列第二期，主要讲讲如何在线导出pdf文件，及office文件如何在线预览。目前前端实现这些技术已经比较成熟，都有比较成熟的技术库，下面来和大家一起过一下吧。

纯前端导出pdf

这里就不造轮子了，说一说纯前端导出pdf的几个流行的前端库，大家可以根据不同场景使用。

1、pdfmake

github地址：https://github.com/bpampuch/pdfmake

pdf能够支持中文，具有部分自适应布局功能，需要引入字体库。

前言

本系列给大家介绍js文件系列，包含psd文件上传图层解析，pdf/word/ppt等办公文档在线预览，纯前端导出精美pdf文档（结案报告/体检报告等）。今天和大家分享的是psd上传图层解析。psd图层解析，我们这里用到了第三方的psdjs文件库。下面详细介绍一下psdjs的前端使用。

场景

主要可以用于psd文件上传图层解析，然后编辑图层，导出图片的功能。

nodejs的使用

nodejs使用比较简单。官方文档也有，直接拿来用就可以了。如下：

前言

工作中经常会用到各种图标，我们会要求设计师ued同学放到iconfont中，但是有时候iconfont要求比较高，png或者svg图片没有问题，上传到iconfont中有时候会出现异常情况，ued同学很苦恼。iconfont的好处就是可以实时修改图标的颜色。一个图标，多处使用。那么png和svg图片能否达到iconfont的效果呢？可以随时修改png或者svg等图片图标的颜色呢？答案是有的，今天就给大家介绍一下，png或者svg如何更换颜色。

使用mask遮罩实现png等图标更换颜色

demo演示请看 https://www.haorooms.com/uploads/example/mask/test.html

代码如下：

<span class="changecolor"></span>

  .changecolor {
    display: inline-block;
    width: 432px; height: 99px;
    background-color: #dd1b14;
    -webkit-mask:url(./test.png) no-repeat;
    mask:url(./test.png) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}