在kintone应用的记录中可以添加附件。
通过JavaScript自定义,附件可以有很多用法。比如:与其他应用整合、或使列表页面上的附件图片像相册一样显示网格等等。
但是,有不少人想尝试又觉得类似这样“高端的操作离自己好遥远・・・”。
首先要从基础知识开始。这次就向大家介绍操作附件时必不可少的文件下载处理。
顺便一提,下载文件 API不支持使用kintone.api() 发送 REST API 请求。
处理流程
获取记录信息,获取要下载的文件的fileKey。
使用fileKey编写查询语句,从kintone下载文件。
下载的文件保存在本地。
从记录信息获取要下载的文件的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月版中进行过确认。