码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-12 18:44:38      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:取数   type   前端技术   idt   nload   data   http   move   function   

一、普通HTML下载后台文件
如果想通过纯前端技术实现文件下载,直接把a标签的href属性设置为文件路径即可,如下:
<a href="https://cdn.shopify.com/s/Manaul.pdf">download</a>
但是,对于 txt, jpg, pdf 等格式的文件,浏览器支持直接打开,这时需要用
< a href = "https://cdn.shopify.com/s/Manaul.pdf" download = "test.pdf" > download</a >
download属性不止可以实现下载,还可以规定下载时的文件名,如果不填写,会自动使用默认文件名。

二、普通JS下载后台文件
function down(data) {
  var a = document.createElement(a);
  document.body.appendChild(a);
  a.download = 111.txt;
  a.href = URL.createObjectURL(data);
  a.click();
  $(a).remove();
};

三、PDF多页面下载
//前端用PDF展示后台文件,使用插件:jquery.media.js
$scope.clickButton = function () {
  tradeApi
    .query({
      method: post,
      root: report,
      url: /audit_report/downloads/report,//告知服务器我要数据,服务器过滤出数据,放到下面src下
      data: params,
      responseType: blob,
      check_status: never,
    })
    .then(function (data) {
      $(#handout_wrap_inner).media({
        width: 100%,
        height: 680px,
        autoplay: true,
        src: /audit_report/downloads/Manaul.pdf//我到这里获取数据。如果不需服务器过滤数据,则只需要此处的路由
      });
    });
};

 

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

标签:取数   type   前端技术   idt   nload   data   http   move   function   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!