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

2021-04-13 13:27

阅读:579

标签:width   param   method   get   query   server   代码   gettime   function   

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

 

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

标签:width   param   method   get   query   server   代码   gettime   function   

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

上一篇:jQuery

下一篇:vue组件间的通信之pubsub-js


评论


亲,登录后才可以留言!