I have a django function with return:
...
return FileResponse(open('demo.docx', 'rb'))
I use ajax to get it on client side. Now I need to download it on client side. I use this code:
...
success:function(response){
var blob = new Blob([response]);
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "file.docx";
link.click();
},
...
Edited:
function func(){
var csrftoken = $("[name=csrfmiddlewaretoken]").val();
$.ajax({
type: 'POST',
url: '/myapp/func/',
headers:{
"X-CSRFToken": csrftoken
},
data: {name:"",'image1': Data1},
success:function(response){
var blob = new Blob([response]);
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.setAttribute('target', '_blank');
link.download = "file.docx";
link.click();
},
error : function(xhr,errmsg,err) {
alert("ajax error: func");
}
});
}
However it downloads a corrupt something, probably not a docx file. How can I get on client side what I read as a docx?
I came to a solution after serching for quite some time:
I added these lines to AJAX:
xhrFields: {
responseType: 'blob'
},
and then after success:
var blob = new Blob([response], {type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"});
var objectUrl = URL.createObjectURL(blob);
The issue might be the missing download attribute on the a element.
Please try this:
success:function(response){
var blob = response.blob();
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.setAttribute('target', '_blank');
link.download = "file.docx";
link.click();
},
Related
I have javascript function for downloading file from a textarea and saving it as JSON, XML or a CSV file.
I have it on my credit card numbers generator. However the downloading function gets executed as many times as I generated new numbers. For example I if I generate numbers five times, it downloads 5 files of the same set of numbers.
How can I fix it? I don't know javascript very much and I copied the download function from the internet.
By the way, if I didn't save 'data.file_format' to the variable it would download files with the previous file formats picked.
Here is link to the web app where it downloads like this:
http://themm1.pythonanywhere.com/advanced/
$('#file_generator').on('submit', function(event) {
$.ajax({
data: {
brand: $('#brand').val(),
count: $('#count').val(),
data_format: $('#data_format').val()
},
type: 'POST',
url: '/file_generator'
}).done(function(data) {
textarea = document.getElementById('textarea')
if (data.file_format == 'csv' || data.file_format == 'xml') {
textarea.value = data.file;
} else {
textarea.value = JSON.stringify(data.file, null, 2);
}
format = data.file_format
});
$('#download').on('click', function() {
console.log(format)
var text = document.getElementById('textarea').value;
text = text.replace(/\n/g, '\r\n');
var blob = new Blob([text], {
type: 'text/plain'
});
var anchor = document.createElement('a');
anchor.download = `creditnumbers.${format}`;
anchor.href = window.URL.createObjectURL(blob);
anchor.target = '_blank';
anchor.style.display = 'none';
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
});
event.preventDefault();
});
The issue is because you've nested the click event handler for #download inside the submit event for the form. Due to this, every time you generate a number, another click handler is added to the button which in turn creates and downloads another instance of the file. To fix the problem, separate the event handlers.
Also note that you can simplify the logic by using jQuery methods - you've already included it in the page, so you may as well use it!
let $textarea = $('#textarea');
$('#file_generator').on('submit', function(e) {
e.preventDefault();
$.ajax({
data: {
brand: $('#brand').val(),
count: $('#count').val(),
data_format: $('#data_format').val()
},
type: 'POST',
url: '/file_generator'
}).done(function(data) {
if (data.file_format === 'csv' || data.file_format === 'xml') {
$textarea.val(data.file);
} else {
$textarea.val(JSON.stringify(data.file, null, 2));
}
});
});
$('#download').on('click', function() {
var text = $textarea.val().replace(/\n/g, '\r\n');
var blob = new Blob([text], { type: 'text/plain' });
$(`<a download="creditnumbers.${$('#data_format').val()}" href="${window.URL.createObjectURL(blob)}" target="_blank" style="display: none;">`).appendTo(document.body)[0].click().remove();
});
I have a wizard with different forms on every step. In one of the steps I have cropper for images and on next step I want to send crop data to controller method but I can't add that to serializeArray. This is my js part:
wizard.on('beforeNext', function (wizardObj) {
wizardObj.stop();
let wizardForm = $('#kt_form_' + wizardObj.currentStep)
let dataForm = wizardForm.serializeArray()
if (wizardObj.currentStep == 2) {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas.toBlob(function (blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
var base64data = reader.result;
dataForm.push({ name: "cropImage", value: base64data });
}
});
}
let url = wizardForm.attr('action')
let method = wizardForm.attr('method')
$.ajax({
url: url,
type: method,
data: dataForm,
}).done(function (response) {
wizardObj.goNext();
})
When I console log a dataForm I see that I have cropImage attribute but on controller method it's not part of request when I dd($request->all())
I am working on an image panel that displays the image titles and a link to download the image. I have an onclick function that gathers the base64 data from the database and then 'decodes' it. However, when I decode it I'm getting back a string of Chinese text..which is obviously not what I'm looking for.
$(document).ready(function() {
$('.downloadAttachment').on('click', function() {
var documentId = $(this).attr("data-id");
console.log(documentId)
$.ajax({
dataType: 'json',
//data: id,
async: false,
type: 'GET',
//url: baseUrl + 'rest/incdDocument/getAll?branchCode=' + brCode + '&receivedDate=' + receiveDate + '&complaintID=' + cId + '&incidentID=' + incidentId+ '&documentID='+documentId,
url: baseUrl + 'rest/incdDocument/get?branchCode=009&receivedDate=03/10/2017&complaintID=170&incidentID=3'+'&documentID='+documentId,
success: function(data) {
if (data) {
var image = Base64.decode(data.data);
window.open(image, '_blank');
}
},
error: function(request, status, error) {
console.log(error)
}
});
return false;
})
});
Is there a better way to extract this data and actually turn it into an image?
Searching for like this ?
var image = new Image();
image.src = data; (complete base64 sting with imagetype)
Download Image
Make a download.php file with return the a image with
header('Content-type:image/png'); or other image type
I must pass array from JS to PHP using $.post(), create file using array and download it.
Using this pass array:
$('#csv').click(function () {
$.post(
window.location + "crawler/save_to_file",
{
dane: wynik //array
});
});
Now in PHP using this:
$tablica=$_POST['dane'];
$filename = "export-to-csv.csv";
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Content-type: text/csv");
header("Content-Disposition: attachment; filename=\"$filename\"");
header("Expires: 0");
$fh = fopen( 'php://output', 'w' );
$heading = false;
if(!empty($tablica))
foreach($tablica as $row) {
if(!$heading) {
fputcsv($fh, array_keys($row));
$heading = true;
}
fputcsv($fh, array_values($row));
}
fclose($fh);
But when click on button to create and download file, nothing happens.
Thanks
CODE UPDATE
JS file:
$.ajax({
url: window.location + "crawler/",
type: "POST",
dataType: "json",
data: {
wartosc: zmienna
},
success: function (odp) {
wynik = odp; //array
tab = JSON.stringify(odp);
$.post(window.location + "crawler/return_data",
{
data: tab
},
function (data) {
$('#wynik').html(data);
$('.pobierz').show();
}
)
}
})
$('.button').click(function() {
var $form = $('<form action="' + window.location + 'crawler/save_to_csv" method="post"></form>');
$.each(wynik, function() {
$('<input type="hidden" name="dane[]">').attr('value', this).appendTo($form);
});
$form.appendTo('body').submit();
});
And var_dump array in PHP file:
function save_to_csv()
{
$tablica=$_GET['dane'];
var_dump($tablica);
}
return: "Undefined index: dane"
EDIT
$tablica must be $_POST not $_GET
This can be done with AJAX but you need to use the File api.
So you do something like this:
$.post("csv.php", {
dane: wynik //array
}, function(response){
var blob = new Blob([response], { type:'text/csv' });
alert(URL.createObjectURL(blob));
});
The url you get from the alert, contains your csv file.
And of course if you want to go directly to the file you replace the alert with:
window.location.href=URL.createObjectURL(blob);
UPDATE
If you want to use a custom filename, there is a way to mask the url generated by URL.createObjectURL(), by using an a element.
We than can use the new HTML5 attribute download which allows us to mask the url.
Here is the updated code:
$.post("csv.php", {
dane: wynik //array
}, function(response){
var blob = new Blob([response], { type:'text/csv' }),
a = document.createElement('a'),
url = URL.createObjectURL(blob);
// Put the link somewhere in the body
document.body.appendChild(a);
a.innerHTML = 'download me';
a.href = url;
// Set our custom filename
a.download = 'myfilename.csv';
// Automatically click the link
a.click();
});
Are you forced to use AJAX to send that array to your PHP code? If yes, it is not really possible.
If not, instead of your AJAX call, you could build a hidden form with hidden inputs containing your array items and submit it via JavaScript.
UPDATE
Short example for form built with JS:
$('#csv').click(function() {
var $form = $('<form action="' + window.location + 'crawler/save_to_file" method="post"></form>');
$.each(wynik, function() {
$('<input type="hidden" name="dane[]">').attr('value', this).appendTo($form);
});
$form.appendTo('body').submit();
});
function searchHSCodePopUp(){
var appname = "${ctx}";
var url = location.href; // entire url including querystring - also: window.location.href;
var baseUrl = url.substring(0, url.indexOf('/', 14));
baseUrl = baseUrl + appname;
var token = "<c:out value="${TXN_TOKEN}"/>";
var selectedColumn=document.getElementById("select").value;
var enteredValue=document.getElementById("value").value;
var finalUrl=baseUrl+"/filter/cttOwnerHsCodePopup?TXN_TOKEN="+token+"&column="+escape(selectedColumn)+"&value="+escape(enteredValue);
hscodeDialog.dialog("close");
hscodeDialog=$("#ownerHsCodeDialog").dialog({
width: 600,
height: 500
});
$.ajax({
type: "POST",
url:finalUrl,
secureuri:false,
async: false,
success: function(data){
$('#ownerHsCodeDialog').html(data);
},
error: function(data,status, error){
return false;
}
});
}