0

I have no idea what the issue is, I am completely new in Angular. I am trying to read a local .csv file and write it's contents into a table. All that works, except for the fact that all my special characters - "č, ć, š, ž"... are turned into �. The text from the .csv file arrives to the next .ts file already messed up so my guess is that something here is wrong.

This is my code:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class CSVService {

  csvPath = "podaci.csv";

  constructor(private http: HttpClient) { }

  getUserData() {
    const headers = new HttpHeaders({'Content-Type':'text; charset=UTF-8'});
    return this.http.get(this.csvPath, {responseType: 'text',headers});
  }

}

And this is what I see in the inspector - Network:

Response headers:

Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Content-Length: 166
Content-Type: text/csv; charset=UTF-8
Date: Thu, 11 Jun 2020 18:06:51 GMT
ETag: W/"a6-LoPGiIg9Tq/YkFbUjQBkFcVvZCg"
X-Powered-By: Express

Request Headers:

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: hr-HR,hr;q=0.9,en-US;q=0.8,en;q=0.7,it;q=0.6
Connection: keep-alive
Content-Type: text; charset=UTF-8
Host: localhost:4200
If-None-Match: W/"a6-LoPGiIg9Tq/YkFbUjQBkFcVvZCg"
Referer: http://localhost:4200/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36

I tried placing different types of charset headers but it always looks the same.. Sorry if I missed any info, I would appreciate if somebody explained this to me.. thank you

  • did you checked via postman / or any rest client from there you are able to get correct characters as response ? – LogicBlower Jun 11 '20 at 18:15
  • @LogicBlower I didn't, I will do it now and comment the results I get –  Jun 11 '20 at 18:32
  • @LogicBlower in Postman I also get � characters.. is there any way to read the real characters with Angular? –  Jun 11 '20 at 18:37
  • you have to make a logic in that case, normally for file system , backend decode the file in base64 format and in ui we decode the base64 data – LogicBlower Jun 11 '20 at 18:39
  • try playing with headers like accept : , or other , i personally proffered base64 for all the files when i faced similar type of issue. (when pdf is downloaded then unwanted special charters are there in my case). – LogicBlower Jun 11 '20 at 18:44

2 Answers2

0

Try putting 

<meta name="keywords" 
          charset="UTF-8"
          content="Meta Tags, Metadata" />

in your index.html

Aakash Garg
  • 10,649
  • 2
  • 7
  • 25
  • I have international characters on the other parts on my page, they are all shown normally.. The issue is only when trying to get the local .csv file –  Jun 11 '20 at 18:31
  • the this might solve it :- https://stackoverflow.com/questions/31959487/utf-8-encoidng-issue-when-exporting-csv-file-javascript – Aakash Garg Jun 11 '20 at 18:39
0

In this case from backend you have to encode a file and decode it a ui.

You can use base64 format as javascript can decode that.

If you use base 64 then below is the link , i use this code to decode base 64 response from back-end for files

https://gist.githubusercontent.com/lblower/45950c69ee0dff418289d0f84c1f0a50/raw/e35159c72369cbaf4ae0f01a80874ad6e1341834/base%252064%2520file%2520decode

LogicBlower
  • 1,250
  • 1
  • 8
  • 14
  • I don't know how to apply your code to my issue.. This is my first project in Angular, I am reading a local .csv file and writing it to a table.. All in angular, no backend –  Jun 11 '20 at 19:02
  • if you just have a csv spefic issues you can try this one https://stackoverflow.com/questions/19492846/javascript-to-csv-export-encoding-issue – LogicBlower Jun 11 '20 at 19:14