Wątek przeniesiony 2023-09-18 10:44 z JavaScript przez Riddle.

Pobieranie pliku z serwera poprzez API

0

Witam,

to moje pierwsze zetknięcie z JavaScript. Niestety nie daję rady z otoczką do poniższego kodu. Kod dostarczyła hurtownia z która współpracuję, mam aktywny login i hasło. Czego nie potrafię albo nie wiem? Nie wiem gdzie cała reszta do tego kodu. Chciałbym osadzić kod na stronce albo w makro i rezultatem powinien być plik zapisany lokalnie.
Z góry dziękuję i przepraszam, że tak bez przywitania.
Michał

kod:

const url = "https://api.adres_serwera.pl/json/product/all";
 const login = "username"; // username
 const password = "password"; // password
 const basic = "Basic " + btoa(login + ":" + password); //base64 - btoa function in javascript

 const params = {
  headers: {
   "content-type": "application/json; charset=UTF-8",
   Authorization: basic
  },
  method: "GET"
 };

 //basic api reading
 fetch(url, params)
  .then(res => res.json())
  .then(res => {
   console.log(res);
  })
  .catch(error => console.log(error));
2 
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Hello, world!</title>

<body>
    <button id="myButton">Click me</button>
    <script>
        var button = document.getElementById("myButton");
        button.addEventListener("click", function () {
            const url = "https://swapi.dev/api/people/1";

            const params = {
                headers: {
                    "content-type": "application/json; charset=UTF-8"
                },
                method: "GET"
            };

            fetch(url, params)
                .then(res => res.json())
                .then(async res => {
                    var blob = new Blob([JSON.stringify(res)], {
                        type: "application/json",
                    });
                    const newHandle = await window.showSaveFilePicker();
                    const writableStream = await newHandle.createWritable();
                    await writableStream.write(blob);
                    await writableStream.close();
                })
                .catch(error => console.log(error));
        });
    </script>
</body>

</html>

Przykład jak pobrać i zapisać plik, użytkownik wybiera docelową lokalizację.

0

Zrobiłem tak::

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Hello, world!</title>

<body>
    <button id="myButton">Click me</button>
    <script>
        var button = document.getElementById("myButton");
        button.addEventListener("click", function () {
            
            
  const url = "https://api.xxxxxx.pl/json/product/all";
 const login = "xxxxxx"; 
 const password = "xxxxxx"; 
 const basic = "Basic " + btoa(login + ":" + password); 

 const params = {
  headers: {
   "content-type": "application/json; charset=UTF-8",
   Authorization: basic
  },
  method: "GET"
 };

 
            fetch(url, params)
                .then(res => res.json())
                .then(async res => {
                    var blob = new Blob([JSON.stringify(res)], {
                        type: "application/json",
                    });
                    const newHandle = await window.showSaveFilePicker();
                    const writableStream = await newHandle.createWritable();
                    await writableStream.write(blob);
                    await writableStream.close();
                })
                .catch(error => console.log(error));
        });
    </script>
</body>

</html>

nie działa...

1

Nie mam szklanej kuli, co to znaczy nie działa? Jak klikasz button to nic się nie dzieje, plik się nie tworzy, plik jest pusty? Włącz narzędzia developerskie (F12), być może to z pobraniem masz coś skopane i wyświetli się error.

Inna przyczyna: serwer, który odpytujesz nie wspiera CORS i nie da się go odpytać z przeglądarki, tylko server-side (NodeJS). Też byłoby widać w narzędziach developerskich (cross origin request blocked czy coś w ten deseń).

Używaj tagów do wstawiania kodu, czyta się to strasznie.

0

Dzień dobry,
przepraszam za tagi, postaram się dostosować. Po kliknięciu na button nic się nie dzieje. pod F12 jest komunikat błędu:

TypeError: window.showSaveFilePicker is not a function
<anonymous> file:///C:/Users/dell/Documents/test_power.html:23
promise callback* file:///C:/Users/dell/Documents/test_power.html:19
EventListener.handleEvent* file:///C:/Users/dell/Documents/test_power.html:1

Ogólnie próbuję się wbić tu: https://api.powerbike.pl/
Pozdrawiam

0

Dziękuję za pomoc, Panowie Saalin oraz Overcq bardzo pomagacie. Faktycznie metoda showSaveFilePicker nie działa w Firefox, Opera ogarnia temat.
Pojawił się problem innego rodzaju, Plik zawiera dane rozdzielane przecinkiem, nie ma sprawy radzę sobie, Pojawił się inny problem...
Każdy rekord tabeli zaczyna się "{" i kończy "}" dla mnie masakra pierwszy raz to widzę. Excel i Access poddały się podczas odczytu i widzą całość jako jeden rekord

0

Tutaj muszę się uderzyć w pierś, że zasugerowałem API, które nie jest standardem dla przeglądarek. Jeśli nie masz problemu ze zmianą przeglądarki to powiedzmy, że jest to do przeżycia.

Rezultat jest w JSON, to tak ma wyglądać. W Excelu trzeba by znaleźć od której wersji jest dostępny import JSON (i jak to zrobić), można też przed zapisem przekonwertować JSON na CSV.

1 użytkowników online, w tym zalogowanych: 0, gości: 1