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