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

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//步骤二
      });
    }
  });

原文地址：https://www.cnblogs.com/gushixianqiancheng/p/12386837.html