184、HTML中,PDF版报告的展示和下载

WebVincent 2020-02-29

HTML中,PDF版报告的展示和下载
相关搜索:脚本编辑器;$scope.r_g_company.reportPage;文件上传中...
1、展示,在HTML中,划定一个区域,用做PDF版报告的展示
(1)封面内容:一个单独的HTML,内有动态数据插入
(2)展示内容:另一个单独的HTML,内有动态数据插入
(3)前端将配置的动态数据和起止时间参数传给后台(步骤一),后台将接收到的数据和自己过滤出来的数据插入到(1)和(2)里,然后将它俩拼成一个PDF文件返给前端、供前端下载,同时还将这个PDF文件放在服务器的一个url里,前端通过给插件jquery.media.js配置{src:url}(步骤二)来请求这个PDF文件并在划定区域里展示。
(4)相关JS代码如下
tradeApi
  .query({
    method: ‘post‘,
    root: ‘report‘,
    url: ‘/audit_report/downloads/report‘,
    load: $scope.pagin_init.load(2),
    data: params,//步骤一
    responseType: ‘blob‘,
    check_status: ‘never‘,
  })
  .then(function (data) {
    $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/‘ + un_code.utf8Decode(data.headers(‘filename‘));
      $(‘#handout_wrap_inner‘).media({
        width: ‘100%‘,
        height: ‘680px‘,
        autoplay: true,
        src: $scope.pdfSrc//步骤二
      });
    }
  });

相关推荐