137、前端下载或用PDF展示后台文件

曾经终败给现在 2023-06-05 08:22 10阅读 0赞

//前端下载后台文件
    this.down = function (data, scope) {
      console.log(data);
      console.log(data.headers);
      var status = data.headers('status_');
      if (status == '1' || status === 1) {
        var blob = data.data;
        if (blob.size > 0) {
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.download = un_code.utf8Decode(data.headers('filename'));/*=后面的是被下载文件的文件名，可以自定义，也可以像此处一样由后台返回方法，前端执行后获取文件名。un_code.utf8Decode是前端方法，不是必须。*/
          $(a).addClass('collect-data-down-a');
          a.href = URL.createObjectURL(blob); /*URL.createObjectURL(blob)可以获取当前文件的一个内存URL*/
          a.click();
          $(a).remove();
        }
      } else {
        scope.g_tip('下载失败！');
      }
    };
    
    //前端用PDF展示后台文件，使用插件:jquery.media.js
    $scope.clickButton = function () {
      var filter_option = angular.copy($scope.filter_option);
      filter_option.eventCategories = filter_option.eventCategories.map(function (item) {
        return parseInt(item);
      });
    
      var params = angular.merge({}, {
        filter: filter_option || {}
      }, $scope.r_g_company.reportPage);
    
      tradeApi
        .query({
          method: 'post',
          root: 'report',
          url: '/audit_report/downloads/report',//1、告诉后台，我要获取文件
          load: $scope.pagin_init.load(2),
          data: params,
          responseType: 'blob',
          check_status: 'never',
        })
        .then(function (data) {//2、后台同意给我文件
          $scope.filter_statu = 1;
          $scope.pdfData = data;
          if ($location.host() === 'localhost') {
            // 开发环境
            $.get('/dev_config/devServerConfig.json?' + new Date().getTime(), {})
             .then(function (dev) {
                $scope.pdfSrc = dev.address + '/static/pdf/' + un_code.utf8Decode(data.headers('filename'));
                $('#handout_wrap_inner').media({
                  width: '100%',
                  height: '680px',
                  autoplay: true,
                  src: $scope.pdfSrc
                });
              });
          } else {
            // 线上环境
            $scope.pdfSrc = '../../static/pdf/' + data.headers('filename');//3、到后台文件仓库获取文件
            $('#handout_wrap_inner').media({//4、把获取的后台文件，展示到前端的这个区域。
              width: '100%',
              height: '680px',
              autoplay: true,
              src: $scope.pdfSrc
            });
          }
        });
    };

转载于:https://www.cnblogs.com/gushixianqiancheng/p/11387859.html