公告:携程集团2022年春季校园招聘会内推!!

【js文件系列二】导出pdf文件和word/excel/pdf/ppt在线预览

前言

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

纯前端导出pdf

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

1、pdfmake

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

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

【js文件系列一】psd文件上传图层解析

前言

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

场景

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

nodejs的使用

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

css实现网页png/svg等透明图片实时变色功能

前言

工作中经常会用到各种图标,我们会要求设计师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%;
}

haorooms博客B站css相关专题视频

前言

haorooms博客2022年视频专题重新拾起。2021年,想做短视频,但是没有好的想法,加上工作比较忙,个人比较懒等原因搁置了。从2022年开始,重新开始录制。欢迎大家关注。

目标和规划

今年短视频想根据专题来录制,分为如下专题