avant-propos
Les jours de typhon à la maison examinent une réalisation de fonction de téléchargement et de téléchargement de fichier!
Télécharger le document
Cliquez sur un bouton pour télécharger un fichier, un scénario d'entreprise qui se produit fréquemment.
Nous devons définir le type de réponse dans l'en-tête de réponse pour indiquer au backend le type de données dont nous avons besoin
export const getCartTemplate = () =>
defHttp.get({
url: Api.api_get_cart_template,
// 确保获取类型正确的数据
responseType: 'blob',
headers: {
ignoreCancelToken: true,
},
});
Après avoir obtenu les données, créez une balise pour un clic automatique :
// 这里的res即返回数据
const saveFile = (res) => {
let blob = new Blob([res], {
// 为了保证浏览器能正确的解析Blob URL返回的文件类型，需要在创建Blob对象时指定相应的type 这里指定为.xlsx
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
});
// 创建一个临时的url指向blob对象
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
// 自定义文件名
a.download = fileName.value;
a.click();
// 释放这个临时的对象url
window.URL.revokeObjectURL(url);
};
À propos de l'objet Blob :
Blob(blobParts[, options])
- blobParts : type de tableau, chaque élément du tableau est connecté pour former les données de l'objet Blob, et chaque élément du tableau peut être ArrayBuffer (tampon de données binaires), ArrayBufferView, Blob, DOMString. ou un mélange d'autres objets similaires.
- options : Facultatif, de type format dictionnaire, vous pouvez spécifier les deux attributs suivants :
type, la valeur par défaut est "", qui représente le type MIME du contenu du tableau qui sera mis dans le blob.
endings, la valeur par défaut est "transparent", qui est utilisée pour spécifier comment la chaîne contenant le terminateur de ligne \n est écrite. Il s'agit de l'une des deux valeurs suivantes : "native", indiquant que le caractère de fin de ligne sera remplacé par un caractère de saut de ligne adapté au système de fichiers du système d'exploitation hôte ; "transparent", indiquant que le caractère de fin enregistré dans le blob sera maintenu inchangé.
tapez la référence du type :
| Poste | Type MIME |
|---|---|
| .doc | application/msword |
| .point | application/msword |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .dotx | application/vnd.openxmlformats-officedocument.wordprocessingml.template |
| .docm | application/vnd.ms-word.document.macroEnabled.12 |
| .dotm | application/vnd.ms-word.template.macroEnabled.12 |
| .xls | application/vnd.ms-excel |
| .xlt | application/vnd.ms-excel |
| .xla | application/vnd.ms-excel |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
| .xltx | application/vnd.openxmlformats-officedocument.spreadsheetml.template |
| .xlsm | application/vnd.ms-excel.sheet.macroEnabled.12 |
| .xltm | application/vnd.ms-excel.template.macroEnabled.12 |
| .xlam | application/vnd.ms-excel.addin.macroEnabled.12 |
| .xlsb | application/vnd.ms-excel.sheet.binary.macroEnabled.12 |
| .ppt | application/vnd.ms-powerpoint |
| .pot | application/vnd.ms-powerpoint |
| .pps | application/vnd.ms-powerpoint |
| .ppa | application/vnd.ms-powerpoint |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
| .potx | application/vnd.openxmlformats-officedocument.presentationml.template |
| .ppsx | application/vnd.openxmlformats-officedocument.presentationml.slideshow |
| .ppam | application/vnd.ms-powerpoint.addin.macroEnabled.12 |
| .pptm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
| .potm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
| .ppsm | application/vnd.ms-powerpoint.slideshow.macroEnabled.12 |
Téléchargement de fichier (basé sur ant-design-vue)
Téléchargez le fichier après avoir cliqué sur le bouton, portez le mot de passe du fichier, le mot de passe peut être vide !
Rubrique modèle :
<a-upload
name="file"
accept=".xls,.xlsx"
:file-list="fileList"
:showUploadList="true"
:withCredentials="true"
:headers="headers"
:before-upload="beforeUpload"
:disabled="loading"
:remove="handleRemove"
>
<a-button>
<SvgIcon name="upload" v-show="!loading" />
{
{ title }}
</a-button>
</a-upload>
En fait, il s'agit d'un téléchargement manuel. Il y a un exemple dans le document antd : ant-design-vue upload component .
La description simple est que deux paramètres doivent être ajoutés sur la base du téléchargement automatique :
| paramètre | illustrer | |
|---|---|---|
| avant le téléchargement | Le crochet avant de télécharger le fichier, le paramètre est le fichier téléchargé, s'il retourne faux, le téléchargement s'arrêtera. Il prend en charge le renvoi d'un objet Promise. Lorsque l'objet Promise est rejeté, le téléchargement s'arrête et lorsqu'il est résolu, il démarre le téléchargement (si la résolution passe dans un objet File ou Blob, alors la résolution passe dans l'objet). Remarque : IE9 ne prend pas en charge cette méthode. | (fichier, liste de fichiers) =>boolean |Promise |
| liste de fichiers | Liste des fichiers téléchargés (contrôlés) | objet[ ] |
Stockez le fichier téléchargé par l'utilisateur dans beforeLoad, qui n'a pas encore été téléchargé :
// 上传前
const beforeUpload = (file: FileItem) => {
console.log(file, ' file ');
fileList.value = [file];
return false;
};
Lorsque le téléchargement est cliqué :
const loading = ref(false);
// 上传
const handleUpload = async () => {
if (!fileList.value.length) {
message.error('Please upload first');
return;
}
// 使用formData格式传递参数
const fd = new FormData();
fd.append('file', fileList.value[0]);
fd.append('pwd', pwd.value);
loading.value = true;
try {
// 发送请求
const res = await importCart(fd);
if (res.success) {
// success
} else {
// fail
} catch (err) {
console.log(err);
} finally {
loading.value = false;
}
};
Lorsqu'il était passé d'automatique à manuel auparavant, il imitait le paramètre de type de contenu de antd, et après l'avoir supprimé, il s'est avéré qu'il n'avait aucun effet :
export const importCart = (params) =>
defHttp.post({
url: Api.api_import_cart,
params,
// 使用antd自动上传时的 response header
'Content-Type': 'application/octet-stream',
headers: {
ignoreCancelToken: true,
// 使用antd自动上传时的 request header
'Content-Type': 'multipart/form-data',
},
});
c'est tout!