Le frontal du projet vue implémente le téléchargement de fichiers pdf

Obtenez l'URL du pdf à partir de l'interface et réalisez la fonction de téléchargement au premier plan

Idée : utilisez la requête get pour obtenir un flux binaire, puis convertissez-le en un Blob, puis créez un DOMString via window.URL.createObjectURL() et affectez-le au href de la balise a. L'implémentation spécifique est la suivante : Étape 1 : Get demande le chemin pdf
,
car le blob nécessite un flux binaire

/*
    url: "http://124.127.246.224:9000/images/2022/10/17/c24f8fd7d53.pdf"
    options: {title:"",fileType:"application/pdf"}
    ele: a标签
*/
let getFile = (url, options, ele) => {
    
    
    axios.get(url,{
    
     responseType: 'blob' }).then(res => download(res, options, ele))
}

Étape 2 : Convertir les données renvoyées en Blob

let download = (res, options, ele) => {
    
    
    let blob = new Blob([res.data], {
    
     type: options.fileType ? options.fileType : "application/octet-binary" });
    let href = window.URL.createObjectURL(blob);
    downloadBlob(href, options, ele);
}

Étape 3 : Exécutez le téléchargement
Piège ici : si vous n'ajoutez pas ele.click(), vous devez cliquer à nouveau pour télécharger le fichier. Si vous ajoutez l'auto-appel de clic, il se téléchargera deux fois, utilisez donc l'indicateur pour enregistrer

let flag = 1;
let downloadBlob = (blobUrl, options, ele) => {
    
    
    ele.href = blobUrl;
    ele.download = options.title;
    flag++;
    if ((flag % 2) == 0) {
    
    
        ele.click();
        window.URL.revokeObjectURL(blobUrl);//释放
    }
}

Étape 4 : appelez le fichier vue

 <el-button type="primary"  @click="download(ele, index)">下载
     <a :id="'d' + index"></a>
 </el-button>

import {
    
    getFile} from "@/utils/download"

download(data, index) {
    
    
  let arr = data.url.split(".");
  let options = {
    
    
    title: data.title,
    fileType: "application/"+arr[arr.length-1]
  };
  let link = document.getElementById("d" + index);
  getFile(data.url,options,link)
},

Le contenu complet du fichier js est le suivant :

//download.js
import axios from "axios"  //需要单独引入，因为当前.js文件不会被vue管理
axios.defaults.headers['Cache-Control'] = 'no-cache'
/*
    url: "http://124.127.246.224:9000/images/2022/10/17/c24f8fd7d53.pdf"
    options: {title:"",fileType:"application/pdf"}
    ele: a标签
*/
let getFile = (url, options, ele) => {
    
    
    axios.get(url, {
    
     responseType: 'blob' }).then(res => download(res, options, ele))
}

let download = (res, options, ele) => {
    
    
    let blob = new Blob([res.data], {
    
     type: options.fileType ? options.fileType : "application/octet-binary" });
    let href = window.URL.createObjectURL(blob);
    downloadBlob(href, options, ele);
}

let flag = 1;
let downloadBlob = (blobUrl, options, ele) => {
    
    
    ele.href = blobUrl;
    ele.download = options.title;
    flag++;
    if ((flag % 2) == 0) {
    
    
        ele.click();
        window.URL.revokeObjectURL(blobUrl);
    }
}

export {
    
    
    getFile,
    download,
    downloadBlob
}

S'il y a une meilleure façon d'écrire, les corrections sont les bienvenues, merci ~