整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          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包安裝方式,我們可以從源碼打包使用。

          1. clone代碼
          git clone https://gitee.com/eigi/x-sheet.git
          
          1. 進入代碼目錄,安裝依賴
          cd x-sheet
          npm i
          
          1. 打包
          npm run build
          
          1. 打包之后,我們可以自己新建一個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界面。

          模板和案例

          以下截圖就展示了官方給出的案例

          1. 一個采購訂單模板

          體驗地址 https://lwebapp.com/example/x-sheet-purchase-order.html

          1. 一個出庫單模板

          體驗地址 https://lwebapp.com/example/x-sheet-outbound-order.html

          1. 一個庫存明細模板

          體驗地址 https://lwebapp.com/example/x-sheet-inventory-details.html

          1. 一個旅行計劃模板

          體驗地址 https://lwebapp.com/example/x-sheet-travel-plan.html

          1. 一個項目計劃模板

          體驗地址 https://lwebapp.com/example/x-sheet-project-plan.html

          1. x-sheet展示2019年日歷,同樣我們根據這個模板,可以構造更多年份的日歷,做一個DIY日歷

          體驗地址 https://lwebapp.com/example/x-sheet-calendar-2019.html

          1. x-sheet展示2020年日歷

          體驗地址 https://lwebapp.com/example/x-sheet-calendar-2020.html

          1. x-sheet支持多實例,一個界面展示多個電子表格,可以分別編輯

          體驗地址 https://lwebapp.com/example/x-sheet-multi-instance.html

          1. x-sheet實測5萬行25列的單元格數據,滑動很流暢

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

          1. x-sheet實測100萬行25列的單元格數據,滑動也很流暢

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

          注意事項

          1. x-sheet支持Modern browsers(chrome, firefox)
          2. 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都能輕松滿足您的需求。它將成為您報表打印的得力助手,讓您告別繁瑣的編碼工作,輕松實現報表打印的自動化。

          趕緊來試試吧!

          創作不易,歡迎大家關注、點贊、收藏、轉發!我會繼續分享高質量的干貨和前沿的技術,給大家提供更多有價值的內容!


          主站蜘蛛池模板: 激情内射亚洲一区二区三区爱妻| 成人一区专区在线观看| 亚洲乱色熟女一区二区三区丝袜| 日韩视频一区二区三区| 国产一区二区三区美女| 精品少妇人妻AV一区二区三区| 精品一区二区三区在线视频| 一区二区精品久久| 无码精品人妻一区二区三区AV| 无码中文人妻在线一区二区三区| 日韩人妻不卡一区二区三区| 国偷自产av一区二区三区| 成人精品视频一区二区三区 | 一区二区三区视频在线观看| 久久精品国产一区二区电影| 一区二区三区高清视频在线观看| 色婷婷亚洲一区二区三区| 久久久国产精品无码一区二区三区| 国产精品一区二区久久| 伊人久久大香线蕉AV一区二区| 在线中文字幕一区| bt7086福利一区国产| 国产未成女一区二区三区| 久久人妻无码一区二区| 日韩三级一区二区| 高清一区二区在线观看| 一区二区手机视频| 久久精品国产免费一区| 蜜臀AV免费一区二区三区| 一区二区三区在线观看| 国产萌白酱在线一区二区| 亚洲高清偷拍一区二区三区| 成人午夜视频精品一区| 无码人妻精品一区二区三区东京热 | 国产SUV精品一区二区88L| 免费在线视频一区| 肥臀熟女一区二区三区| 日韩一区二区电影| 国产精品99精品一区二区三区 | 久久久久女教师免费一区| 亚洲综合国产一区二区三区|