hrsass-components 2.4.3 → 2.4.5

package/lib/hrsass-components.js

@@ -65,7 +65,7 @@ var contentStyle = _interopDefault(require('!!raw-loader!tinymce/skins/content/d
 var SvgPanZoom = _interopDefault(require('svg-pan-zoom'));
 var saveSvgAsPng = require('save-svg-as-png');
 
-var version = "2.4.3";
+var version = "2.4.5";
 
 /**
  * 版本号
@@ -12056,78 +12056,101 @@ var index$6 = {
         }
       });
     },
+    // 计算导出图片的 scale
+    calcExportScale: function calcExportScale(svgWidth, svgHeight) {
+      var realZoom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+      // 屏幕宽高
+      var screenW = window.screen.width;
+      var screenH = window.screen.height;
+      // 目标导出宽度为屏幕宽度的3倍，最高不超过4倍
+      var targetW = screenW * 4;
+      var scale = targetW / svgWidth;
+      // 如果svg很高，按高度再限制一次
+      if (svgHeight * scale > screenH * 4.5) {
+        scale = screenH * 4.5 / svgHeight;
+        if (scale < 1) scale = 1;
+      }
+      // 限制scale范围，防止过大或过小
+      // if (scale < 1) scale = 1;
+      // if (scale > 10) scale = 10;
+      // 叠加当前svgPanZoom缩放
+      scale = scale / realZoom;
+      return scale;
+    },
+    // 导出图片
     exportSvg: function exportSvg(fileName) {
-      var svg = this.$refs.hrOrgChartSvg;
-      var bBox = svg.getBBox();
-      // 克隆SVG，设置viewBox和宽高，确保全部内容
-      var clonedSvg = svg.cloneNode(true);
-      clonedSvg.setAttribute('width', bBox.width);
-      clonedSvg.setAttribute('height', bBox.height);
-      clonedSvg.setAttribute('viewBox', "".concat(bBox.x, " ").concat(bBox.y, " ").concat(bBox.width, " ").concat(bBox.height));
-      // 生成完整SVG字符串
-      var svgStr = new XMLSerializer().serializeToString(clonedSvg);
-      var options = {
-        scale: 1,
-        width: bBox.width,
-        height: bBox.height,
-        left: 0,
-        top: 0
-      };
-      this.svgToPng(svgStr, options);
-      // this.setState({
-      //     loading: true,
-      //     isDownload: true,
-      // })
-      // svgAsDataUri(this.$refs.hrOrgChartSvg, options).then(url => {
-      //     let dataUrL = url.split('base64,')[1]
-      //     this.$axios.post('/business/org/Company/getOrgDiagram.data', { 'base64Str': dataUrL, name: fileName || 'org.png' }).then(res => {
-      //         window.open(`${process.env.VUE_APP_API_BASE_URL}/file.nolog?method=download&fileId=${res}`);
-      //         this.setState({
-      //             loading: false,
-      //             isDownload: false
-      //         })
-      //     })
-      // });
-      // saveSvgAsPng(this.$refs.hrOrgChartSvg, fileName || 'org.png', {
-      //   scale: 1,
-      //   width: bBox.width,
-      //   height: bBox.height,
-      //   top: bBox.y,
-      //   left: bBox.x,
-      // });
-    },
-    svgToPng: function svgToPng(svgStr, options) {
       var _this6 = this;
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var blob, url, imgData;
+        var svg, bBox, clonedSvg, svgStr, realZoom, scale, options;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
+            case 0:
+              svg = _this6.$refs.hrOrgChartSvg;
+              bBox = svg.getBBox();
+              clonedSvg = svg.cloneNode(true);
+              clonedSvg.setAttribute('width', bBox.width);
+              clonedSvg.setAttribute('height', bBox.height);
+              clonedSvg.setAttribute('viewBox', "".concat(bBox.x, " ").concat(bBox.y, " ").concat(bBox.width, " ").concat(bBox.height));
+              _context.next = 8;
+              return _this6.transformImage(clonedSvg);
+            case 8:
+              clonedSvg = _context.sent;
+              svgStr = new XMLSerializer().serializeToString(clonedSvg); // 获取当前svgPanZoom缩放比例
+              realZoom = 1;
+              if (_this6.svgPanZoom) {
+                realZoom = _this6.svgPanZoom.getSizes().realZoom || 1;
+              }
+              // 使用自适应scale
+              scale = _this6.calcExportScale(bBox.width, bBox.height, realZoom);
+              options = {
+                scale: scale,
+                width: bBox.width,
+                height: bBox.height,
+                left: 0,
+                top: 0
+              };
+              _this6.svgToPng(svgStr, options, fileName);
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }))();
+    },
+    // svg转png
+    svgToPng: function svgToPng(svgStr, options, fileName) {
+      var _this7 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var blob, url, imgData;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               blob = new Blob([svgStr], {
                 type: 'image/svg+xml'
               });
-              _context.next = 3;
-              return _this6.blobToDataUrl(blob);
+              _context2.next = 3;
+              return _this7.blobToDataUrl(blob);
             case 3:
-              url = _context.sent;
-              _context.next = 6;
-              return _this6.drawToCanvas(url, options);
+              url = _context2.sent;
+              _context2.next = 6;
+              return _this7.drawToCanvas(url, options);
             case 6:
-              imgData = _context.sent;
-              _this6.downloadFile(imgData, 'org.png');
+              imgData = _context2.sent;
+              _this7.downloadFile(imgData, fileName || 'org.png');
             case 8:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee);
+        }, _callee2);
       }))();
     },
+    // 生成图片数据url
     blobToDataUrl: function blobToDataUrl(blob) {
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              return _context2.abrupt("return", new Promise(function (resolve, reject) {
+              return _context3.abrupt("return", new Promise(function (resolve, reject) {
                 var reader = new FileReader();
                 reader.onload = function () {
                   resolve(reader.result);
@@ -12137,17 +12160,89 @@ var index$6 = {
               }));
             case 1:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2);
+        }, _callee3);
       }))();
     },
+    // 处理图片
+    transformImage: function transformImage(svgNode) {
+      var _this8 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+        var imageList, tasks;
+        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              imageList = _toConsumableArray(svgNode.getElementsByTagName('image') || []);
+              tasks = imageList.map( /*#__PURE__*/function () {
+                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(image) {
+                  var href, imgData, imgUrl;
+                  return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+                    while (1) switch (_context4.prev = _context4.next) {
+                      case 0:
+                        href = image.getAttribute('href') || image.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
+                        if (!href) {
+                          _context4.next = 11;
+                          break;
+                        }
+                        if (!href.startsWith('data:image/')) {
+                          _context4.next = 4;
+                          break;
+                        }
+                        return _context4.abrupt("return");
+                      case 4:
+                        _context4.next = 6;
+                        return _this8.requestImage(href);
+                      case 6:
+                        imgData = _context4.sent;
+                        _context4.next = 9;
+                        return _this8.blobToDataUrl(imgData);
+                      case 9:
+                        imgUrl = _context4.sent;
+                        image.setAttribute('href', imgUrl);
+                      case 11:
+                      case "end":
+                        return _context4.stop();
+                    }
+                  }, _callee4);
+                }));
+                return function (_x2) {
+                  return _ref.apply(this, arguments);
+                };
+              }());
+              _context5.next = 4;
+              return Promise.all(tasks);
+            case 4:
+              return _context5.abrupt("return", svgNode);
+            case 5:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5);
+      }))();
+    },
+    requestImage: function requestImage(url) {
+      var _this9 = this;
+      if (url.startsWith('/platform_web_portal_war_exploded')) {
+        url = url.replace('/platform_web_portal_war_exploded', '');
+      }
+      return new Promise(function (resolve, reject) {
+        _this9.$axios.get(url, {
+          responseType: 'blob'
+        }).then(function (res) {
+          resolve(res);
+        })["catch"](function (err) {
+          reject(err);
+        });
+      });
+    },
+    // 绘制图片到canvas
     drawToCanvas: function drawToCanvas(url, options) {
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
-              return _context3.abrupt("return", new Promise(function (resolve, reject) {
+              return _context6.abrupt("return", new Promise(function (resolve, reject) {
                 var img = new Image();
                 img.setAttribute('crossOrigin', 'anonymous');
                 img.onload = function () {
@@ -12178,11 +12273,12 @@ var index$6 = {
               }));
             case 1:
             case "end":
-              return _context3.stop();
+              return _context6.stop();
           }
-        }, _callee3);
+        }, _callee6);
       }))();
     },
+    // 下载文件
     downloadFile: function downloadFile(data, fileName) {
       var a = document.createElement('a');
       a.href = data;