LESS / CSS: написание статического текста на изображении

Question

LESS / CSS: написание статического текста на изображении

Я столкнулся с той же проблемой и успешно ее разрешил.

«Опубликовать данные JSON на сервере и получить файл excel. Этот файл excel создается сервером и возвращается как ответ клиенту. Загрузите этот ответ в виде файла с пользовательским именем в браузере "

$("#my-button").on("click", function(){

// Data to post
data = {
    ids: [1, 2, 3, 4, 5]
};

// Use XMLHttpRequest instead of Jquery $ajax
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    var a;
    if (xhttp.readyState === 4 && xhttp.status === 200) {
        // Trick for making downloadable link
        a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhttp.response);
        // Give filename you wish to download
        a.download = "test-file.xls";
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
    }
};
// Post data to URL which handles post request
xhttp.open("POST", excelDownloadUrl);
xhttp.setRequestHeader("Content-Type", "application/json");
// You should set responseType as blob for binary responses
xhttp.responseType = 'blob';
xhttp.send(JSON.stringify(data));
});

Вышеприведенный фрагмент просто выполняет следующие действия

Проводка массива как JSON на сервер с использованием XMLHttpRequest.
После извлечения содержимого в виде blob (двоичного) мы создаем загружаемый URL-адрес и привязываем его к невидимой ссылке «a», а затем щелкаем по ней. Я сделал запрос POST здесь. Вместо этого вы можете пойти и для простого GET. Мы не можем загрузить файл через Ajax, должны использовать XMLHttpRequest.

Здесь нам нужно тщательно установить несколько вещей на стороне сервера. Я установил несколько заголовков в Python Django HttpResponse. Вы должны установить их соответственно, если используете другие языки программирования.

# In python django code
response = HttpResponse(file_content, content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")

Так как я загружаю xls (excel) здесь, я скорректировал contentType на один. Вам нужно установить его в соответствии с типом файла. Вы можете использовать эту технику для загрузки любых файлов.

-1

css less styling

задан Chan Yoong Hon 27 March 2019 в 07:36

2 ответа

Другие вопросы по тегам:

css less styling

Похожие вопросы:

score 0 · Answer 1

Попробуйте, надеюсь, это вам поможет. Благодарю

.wrapper {
  position: relative;
}

.wrapper img {
  width: 100%;
}

.wrapper label {
  color: #fff;
  font-size: 24px;
  position: absolute;
}

.wrapper #id1 {
  left: 20px;
  top: 20px;
}

.wrapper #id2 {
  right: 20px;
  top: 20px;
}

.wrapper #id3 {
  left: 20px;
  bottom: 20px;
}

.wrapper #id4 {
  right: 20px;
  bottom: 20px;
}

.wrapper #id5 {
  right: 20px;
  top: 50%;
  transform: rotate(90deg)
}

.wrapper #id6 {
  left: 20px;
  top: 50%;
  transform: rotate(-90deg)
}

<div class="wrapper">
  <label id="id1">Text Left!</label>
  <label id="id2">Text Right!</label>
  <label id="id3">Text Bottom Left!</label>
  <label id="id4">Text Bottom Right!</label>
  <label id="id5">Text Rotate Right!</label>
  <label id="id6">Text Rotate Left!</label>
  <img src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2015/07/Depth-of-field-landscape.jpg" alt="" />
</div>

score 0 · Answer 2

Предполагая, что у вас есть HTML как:

<div class="container">
  <img />
  <p>Foo</p>
</div>

что-то вроде этого будет работать (вам, очевидно, придется возиться со значениями):

.container {
  position: relative; 

  img{ z-index: 1; // img styles here }
  p { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 3; transform: rotate(90deg) }

}

Шаг за шагом :

Расположите текст абсолютно
Поверните его на 90 градусов
Установите Z-индекс выше, чем изображение
Расположите текст правильно на изображении
Прибыль ...