下载文件时的2个必要步骤

aki发表于:2017年02月06日 16:34:03更新于:2020年11月06日 12:53:05

在kintone应用的记录中可以添加附件。
通过JavaScript自定义,附件可以有很多用法。比如:与其他应用整合、或使列表页面上的附件图片像相册一样显示网格等等。

但是,有不少人想尝试又觉得类似这样“高端的操作离自己好遥远・・・”。
首先要从基础知识开始。这次就向大家介绍操作附件时必不可少的文件下载处理。

顺便一提,下载文件 API不支持使用kintone.api() 发送 REST API 请求

处理流程

  1.  获取记录信息,获取要下载的文件的fileKey。

  2.  使用fileKey编写查询语句,从kintone下载文件。

  3.  下载的文件保存在本地。

从记录信息获取要下载的文件的fileKey

首先,获取相应记录的信息。

编写请求Body。

RequestData

{
  "app": 6,
  "id": 2
}

调用获取记录详细信息的API的方法如下。

var url = kintone.api.url('/k/v1/record', true);
kintone.api(url, 'GET', { app: 6, id: 2 }, function(response) {});

记录信息以如下JSON格式返回。
本次要处理的记录中先设置了txt文件。

ResponseData

{
    "records": [
        {
            "Description": {
                "type": "MULTI_LINE_TEXT",
                "value": "文本文件.txt"
            },
            "Createdby": {
                "type": "CREATOR",
                "value": {
                    "code": "testuser",
                    "name": "测试用户"
                }
            },
            "记录编号": {
                "type": "RECORD_NUMBER",
                "value": "2"
            },
            "File": {
                "type": "FILE",
                "value": [
                    {
                        "contentType": "text/plain",
                        "fileKey": "201401240750597F2C2C9FE5EE4F02A05B91A81D1F0D5E320",
                        "name": "测试文件.txt",
                        "size": "1503"
                    }
                ]
            }
        }
    ]
}

※此次获取的fileKey不能用于文件的上传。
接下来,试着从获取到的记录信息中抽取fileKey。
附件字段含有多个项目,要抽取fileKey需要使用数组的index。


下面就是到这步为止的代码。 从获取记录信息到抽取fileKey的处理如下所示。

// 获取相应记录
var url = kintone.api.url('/k/v1/record', true);
kintone.api(url, 'GET', { app: 6, id: 2 }, function(response) {
  // 获取fileKey
  var record = response['record'];
  var filekey = record['File']['value'][0].fileKey;
});

使用fileKey编写查询语句,从kintone中下载文件

指定获取到的fileKey,执行文件下载API

※Content-Type头不需要。(下载JSON格式的文件需要设置)

//操作步骤1中获取的fileKey设置给url。
var url = kintone.api.urlForGet('/k/v1/file', { fileKey: filekey }, true);

// 执行文件下载API。
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    // 应答返回文件。
    console.log(xhr.response);
  }
};
xhr.send();

上面的xhr.response含有文件的内容。

(特别赠送)下载的文件保存到本地

下面是特别赠送的内容。
到前一步为止,文件下载已经完成了。下面特别赠送说明如何将下载的文件保存到本地。

下载的文件保存到Blob对象中即可保存到本地。
以下例子介绍如何生成文件的下载链接(a标签),并在执行JS的时候自动下载文件。

另外,请注意不同浏览器其文件相关的操作也不同。这里以Chrome为例。
关于文件相关处理的浏览器支持情况请参考MDN文档

刚才例子中使用了XMLHttpRequest异步请求。
文件保存到本地的处理需要使用Promise等待请求处理完之后在执行。

//文件保存到Blob对象
var blob = new Blob([xhr.response]);
var url = window.URL || window.webkitURL;

// 获取BlobURL
var blobUrl = url.createObjectURL(blob);

// 生成链接,并设置Blob对象
var alink = document.createElement('a');
alink.textContent = '下载';
alink.download = '下载文件.txt';
alink.href = blobUrl;
alink.target = '_blank';

// 设置鼠标事
var e = new MouseEvent('click', { view: window, bubbles: true, cancelable: true });

// dispatch a标签的点击事件
alink.dispatchEvent(e);

第6行:使用window.URL.createObjectUrl 方法生成 Blob 对象的下载URL。
第11行:指定要下载的文件。这次是文本文件,如果是PDF文件需要像“alink.download = 'test.pdf'”这样指定包含扩展名的名字。
第12行:下载URL设置成a标签。
第19行:dispatch链接(a标签)的点击事件。
这样,不需要手动点击,当JS执行时会自定下载文件。

以上,文件就下载完成了。

请注意:以上自定义不支持智能手机版。

该Tips在2014年4月版中进行过确认。