Как скачать CSV с помощью href с # (знак числа) в Chrome? - PullRequest
Новая
       43

Как скачать CSV с помощью href с # (знак числа) в Chrome?

0 голосов
/ 20 марта 2019

Chrome 72+ теперь обрезает наши данные по первому знаку символа #.

https://bugs.chromium.org/p/chromium/issues/detail?id=123004#c107

Мы использовали временный тег привязки вместе с атрибутом download и hrefАтрибут со строкой CSV для загрузки CSV-данных на странице на компьютеры пользователей.Теперь это не работает в недавнем обновлении Chrome, потому что все данные после первого знака # извлекаются из загруженного CSV.

Мы можем обойти это, заменив # на «num» или другие данные, но это оставляетнаши csv / excel файлы с различными данными, которых мы бы хотели избежать.

Можно ли как-нибудь обойтись, чтобы Chrome не удалял данные в href при загрузке файла? 

let csvContent = "data:text/csv;charset=utf-8,";
let header = "Col1, Col2, Col3";
csvContent += header + "\r\n";
csvContent += "ac, 123, info here" + "\r\n";
csvContent += "dfe, 432, #2 I break" + "\r\n";
csvContent += "fds, 544, I'm lost due to previous number sign";

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "file.csv");
document.body.appendChild(link);
link.click();

Я попытался заменить # на Unicode-символ ⌗, который был достаточно близко и хорошо выглядел в CSV, но Excel не понравился Unicode-символы

1 Ответ

2 голосов
/ 20 марта 2019

Я столкнулся с этой же проблемой, единственное изменение, которое я сделал, - оставил "data:text/csv;charset=utf-8," в незашифрованном виде и просто закодировал часть данных CSV и использовал encodeURIComponent вместо encodeURI следующим образом: 

let prefix = "data:text/csv;charset=utf-8,";
let header = "Col1, Col2, Col3";
let csvContent = header + "\r\n";
csvContent += "ac, 123, info here" + "\r\n";
csvContent += "dfe, 432, #2 I break" + "\r\n";
csvContent += "fds, 544, I'm lost due to previous number sign";

var encodedUri = prefix + encodeURIComponent(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "file.csv");
document.body.appendChild(link);
link.click();

Скопируйте и вставьте это в окно консоли Chrome, и оно будет работать как положено.

...