PS拉框助手 for mac(ps图表快速生成插件)中文版

大家分享一款ps图表快速生成插件，PS拉框助手 for mac可以帮助用户快速制作折线图、面积图、柱状图、饼图、雷达图、地图等，PS拉框助手中文版适用于多个版本的Photoshop，而且是免费的，有需要PS拉框助手插件的朋友可以试试哦！

PS拉框助手 for mac官方介绍

PS拉框助手是由非著名UI设计师灰色执照开发的一款基于photoshop的插件，它能够快速的生成折线图、柱状图、饼图、雷达图、全国各省市的地图、以及按钮、按钮组、窗口、输入框、下拉框、单选、多选、提示、表格、树等常用的UI元素。

https://mac.orsoon.com/Mac/171729.html

PS拉框助手插件特点

节约时间

一般来说，使用PS绘制真实数据的图表是一个非常耗时的过程

简单方便

拉个框，填写颜色值，点击确定就可以轻松获得你想要的图表效果

自动化

自动化绘制的视觉元素将准确地表示数字、尺寸、间距，实现结果真实可靠。

容易实现

拉框助手生成的界面，开发小哥使用Echarts一定能够实现，实现效果能与设计图一致

PS拉框助手mac版使用方法

PS拉框助手插件支持以下版本：Photoshop CC 2015 / 2016 / 2017 / 2018 / 2019/ 2020

以饼图绘制绘制为例（其他类似）

1、使用PS的矩形选框工具拉一个框（如插件名称，先拉一个框是必须的），建议你按住Shift键拉一个正方形的框

2、选择饼图的类型，分别是常见的饼状图和南丁格尔玫瑰图

3、如果您需要绘制的是空心的饼图，填写镂空半径，它可以是百分比，也可以是具体的像素值

4、默认会生成北京、上海、广州三个区域的饼图。你可以根据需要输入相应的文字和数值，也可以增加或删除区域

5、点击确定按钮，PS拉框助手则会自动给你绘制好你所需要的图形

文：免费开源的高性能JavaScript电子表格：X-Sheet入门体验

背景

随着互联网技术特别是网页应用的发展，我们对在线文档、轻应用的需求越来越高，很多小伙伴都已经习惯云办公，在线协同办公了，常用的就是腾讯文档、金山文档、石墨文档、飞书等，国外主要就是Google Sheet，最近小编发现了一款国人开发高性能前端javascript电子表格,受启发于Google Sheet，使用HTML5 canvas渲染。接下来，小编分享下入门体验。

介绍

首先放上x-sheet官方开源地址

https://gitee.com/eigi/x-sheet
https://github.com/eiji-th/x-sheet

在线体验地址：

https://lwebapp.com/example/x-sheet.html

可以从gitee上拉到最新代码到本地看看，这是一个标准的es6现代化工程，自定义webpack打包，运行后还有代码分析，其中还有好几个案例可以参考。

功能列表

我们先看看README上的功能说明

撤销 & 反撤销
格式刷
清空格式
文本格式
字体设置
字体大小
字体加粗
斜体字
下划线
删除线
文字颜色
单元格颜色
单元格边框
字体倾斜
边框倾斜
背景倾斜
合并单元格
水平对齐
自动换行
冻结单元格
单元格函数 (处理中)
行高和列宽设置
复制, 剪切, 粘贴 (处理中)
自动填充
插入行, 列 (处理中)
删除行, 列 (处理中)
隐藏行, 列 (处理中)
支持多个sheet表
打印 (处理中)
数据验证 (处理中)
导出XLSX
导入XLSX (处理中)
导出CVS (处理中)
导入CVS (处理中)
导入图片 (处理中)
数据筛选 (处理中)

使用

那么如何启动一个x-sheet demo呢？由于现在x-sheet还处在开发阶段，暂未提供npm包安装方式，我们可以从源码打包使用。

clone代码

git clone https://gitee.com/eigi/x-sheet.git

cd x-sheet
npm i

打包

npm run build

打包之后，我们可以自己新建一个html文件，引入打包后的源码使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>X-XWorkSheet</title>
        <link href="XSheet.css" rel="stylesheet">
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            html, body {
                height: 100%;
                display: block;
            }
        </style>
        <script src="XSheet.js" type="text/javascript"></script>
    </head>
    <body id="demo">
        <script>
          const dome = document.getElementById('demo');
          const xSheet = new XSheet(demo);
        </script>
    </body>
</html>

或者直接进入源代码的example目录，直接用浏览器打开里面的.html文件就能看到官方给的丰富的本地模板和案例了，都是支持在线编辑的excel界面。

模板和案例

以下截图就展示了官方给出的案例

一个采购订单模板

体验地址 https://lwebapp.com/example/x-sheet-purchase-order.html

一个出库单模板

体验地址 https://lwebapp.com/example/x-sheet-outbound-order.html

一个库存明细模板

体验地址 https://lwebapp.com/example/x-sheet-inventory-details.html

一个旅行计划模板

体验地址 https://lwebapp.com/example/x-sheet-travel-plan.html

一个项目计划模板

体验地址 https://lwebapp.com/example/x-sheet-project-plan.html

x-sheet展示2019年日历，同样我们根据这个模板，可以构造更多年份的日历，做一个DIY日历

体验地址 https://lwebapp.com/example/x-sheet-calendar-2019.html

x-sheet展示2020年日历

体验地址 https://lwebapp.com/example/x-sheet-calendar-2020.html

x-sheet支持多实例，一个界面展示多个电子表格，可以分别编辑

体验地址 https://lwebapp.com/example/x-sheet-multi-instance.html

x-sheet实测5万行25列的单元格数据，滑动很流畅

体验地址 https://lwebapp.com/example/x-sheet-50000-rows-test.html

x-sheet实测100万行25列的单元格数据，滑动也很流畅

体验地址 https://lwebapp.com/example/x-sheet-1000000-rows-test.html

注意事项

x-sheet支持Modern browsers(chrome, firefox)
x-sheet现在的开源协议是 MOZILLA PUBLIC LICENSE

体验总结

大致体验了下x-sheet，可以说可圈可点

功能上，丰富的单元格样式，富文本，边框倾斜，合并单元格，冻结，撤销重做，格式刷等核心功能，还支持导入导出xlsx文件，多实例，支持大数据量
界面上，风格类似Google Sheet，清爽舒适，操作体验非常棒
轻量，代码模块拆分清晰，二次开发可扩展性好

当然也有些不足，比如不支持协同，快捷键支持不完善等，小编体验x-sheet时，x-sheet还处于开发阶段，所以难免有些bug存在，如果要在生产使用，需要自己多做测试。这是一款国人开发的开源免费的电子表格，希望大家多多给予支持，也欢迎踊跃提交issue和PR交流探讨，希望作者能添加更多功能，继续维护好这个表格插件。

原文：免费开源的高性能JavaScript电子表格：X-Sheet入门体验

小墨是前端」专注分享前端技术，推荐优秀的开源项目，展示Github、Gitee上的创意作品，带你深入前端底层，一起成长。

大家好，本期给大家推荐一个超棒Vue插件vue-plugin-hiprint，它是一款hiprint封装的Vue插件，可以让你快速生成可视化报表。

一、简介

一款基于 hiprint 的 Vue 插件vue-plugin-hiprint ，是一个生成和打印可视化报表的工具。hiprint 是一个 html5 的在线打印设计器，支持不同类型的数据源和打印模式。为了方便在 Vue 项目中使用，vue-plugin-hiprint 把 hiprint 封装成一个 Vue 组件。无论你是需要打印表格、图表、条形码、二维码，还是需要打印发票、订单、标签、证书，vue-plugin-hiprint 都可以帮你实现。

二、功能特点

1、简单易用： 只需通过npm引入插件，就可以在 Vue 项目中使用 hiprint 的所有功能，无需额外的配置和代码。
2、视化设计： hiprint 提供了一套可视化设计器，简单的进行拖拽、缩放、旋转、复制、删除，实现自定义的报表布局和样式。
3、支持多种数据源： 支持静态数据、动态数据、本地数据、远程数据等多种数据源。
4、多种打印模式： 支持普通打印、连续打印、分页打印、套打等多种打印模式。
5、支持多种HTML元素： 文本、图片、表格、图表、条形码、二维码、水印多种元素，可以满足各种复杂场景的报表需求。

三、使用步骤：

1、安装插件：使用 npm 安装插件，命令如下：

npm install vue-plugin-hiprint --save

2、引入插件：在 main.js 中引入插件，并注册为全局组件，代码如下：

import VuePluginHiprint from 'vue-plugin-hiprint';

Vue.use(VuePluginHiprint)

3、使用组件：在需要使用 hiprint 的页面中，使用 <vue-plugin-hiprint> 标签，传入相应的属性和事件，代码如下：

<template>
  <div id="app">
    <vue-plugin-hiprint
      :designer="true"
      :data="data"
      :url="url"
      :template="template"
      @save="save"
      @print="print"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {}, // 静态数据或动态数据
      url: '', // 远程数据的地址
      template: '', // 报表模板的地址
    };
  },
  methods: {
    save(template) {
      // 保存报表模板的方法
    },
    print() {
      // 打印报表的方法
    },
  },
};
</script>

4、设计报表：在浏览器中可看到 hiprint 的设计器界面。在左侧的工具栏中可以选择需要的元素，拖拽到右侧的画布中，进行设计。在右侧的属性栏中修改元素的属性，如大小、位置、颜色、字体等。

四、项目地址

GitHub：https://github.com/CcSimple/vue-plugin-hiprint
Gitee：https://gitee.com/ccsimple/vue-plugin-hiprint

五、总结

vue-plugin-hiprint将hiprint的强大打印功能无缝集成到您的Vue应用程序中。使用简单易用的可视化设计界面，像搭积木一样，轻松拖拽各种元素，就能设计出精美的报表。并且支持多种数据源，比如：JSON、CSV、XML、数据库等，让您无需编码即可快速生成报表。支持多种打印模式，包括本地打印、网络打印、PDF导出，选择最适合您的打印方式。还提供了丰富的元素，包括文本、表格、图表、条形码、二维码等，让您轻松创建各种复杂的报表。所以无论您是需要打印发票、订单、标签、证书，还是需要打印表格、图表、条形码、二维码，vue-plugin-hiprint都能轻松满足您的需求。它将成为您报表打印的得力助手，让您告别繁琐的编码工作，轻松实现报表打印的自动化。

赶紧来试试吧！

创作不易，欢迎大家关注、点赞、收藏、转发！我会继续分享高质量的干货和前沿的技术，给大家提供更多有价值的内容！

在线咨询

上一篇：前端页面如何原样快速导出PDF？附示例
下一篇：htmx：增强版 HTML 来了！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商