I am trying to generate a PDF and open a modal on button click.
In the modal the generated PDF should be loaded in the DOM.
To generate the PDF I use axios:
axios.post('/preview', formData)
.then(function (response) {
this.previewPdf = response.data;
}.bind(this));
The generated PDF name is returned in the controller and saved in the this.previewPdf variable.
Then I use laravel URL wildcards to load the PDF in the modal.
<div class="modal-body">
<embed :src="'/preview/' + previewPdf" width="100%" height="600" type='application/pdf'>
</div>
And the controller for the route /preview/{pdfname} returns the PDF.
return Storage::disk('local')->get('temppdf/' . $pdfname);
However if I open the modal the PDF seems to be loaded (Network preview):
%PDF-1.7
%����
2 0 obj
<</Type/XObject
etc.
But the modal just shows an empty <embed>. Although the src of it is correctly src="preview/pdfname.pdf".
What could cause this issue?
I found the solution for my problem.
In the controller where I return my PDF I needed to return a header.. The content-type without the header before was just html.
With this line of code it works:
return response(Storage::disk('local')->get('temppdf/' . $pdfname), 200)
->header('Content-Type', 'application/pdf');
Related
this my component.ts code
this.allMeta.getProfilePictureUsingMediaId({
"SessionID": "dswesfgdgfdgf12463",
"MACAddress":"1235874"
"MediaID":this.userProfilePicture
}).subscribe(
data => {
console.log(data);
this.profilepic=data
}
);
below is my service code,
getProfilePictureUsingMediaId(pjson){
return this.http.post(this.profile + 'getProfilePictureUsingMediaId', pjson)
.map((data: any) => data.json());
}
<div style="height:240px" class="row">
<img id="ItemPreview" [src]="'data:image/jpg;base64,'+profilepic" />
</div>
Below displaying data I am getting from server, how to make it visible same image in my web app, beacuse after calling server in service, i got data value undefiend.
����JFIF��C
#%$""!&+7/&)4)!"0A149;>>>%.DIC
<H7=>;��C
;("(;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;��"����=!1A"Qaq2B��#R�$���3b�Sr�����C����%!1AQ"a2���?B�vϚ���8���\J3��y�A�l9fv��k�<�H�R�{\n��&���T��q�k���h$Yau;�����p���x�������nN�q��RWcp����h�~f}�8#�$�&���$Tn;�6Is�X�"#C��n-ߦϳ��k8�c��)�V���b�Y�\p��Vҍ�fp�'I��S�.4%�Xx����9�S+F������|2D�F�d%�F��UlS��NkEL�VP
�0k�Lr�RRA'�]���禣`���DX��,Hc[�)nO�����i��Ow�sC��";9����-�é2�
Sorry I don't know how to send this data so I am using html to show u this picture and also it is not complete data.
Use
<img id="ItemPreview" [src]="imageVariable" /> . in your html
and use an imageVariable in ts file like this
imageVariable="`data:image/png;base64,"+ yourBytestream
Here is a working solution:
stackblitz
i want to save vue js code Inside div in database using mongo db
i create ws to save page Inside mongoDb using nodejs
when i click save button to save code vue js Inside html
save(){
var vm=this;
var page={
"id":"2",
"page":vm.$el.innerHTML
}
console.log("hh"+vm.$el.innerHTML);
var HTTPpOST=axios.create({
baseURL: `http://localhost:3000/api/product/2`,
headers: {
Accept:'application/json'
}
})
HTTPpOST.put('',page).then(function(response){
}) .catch(function(error){
var vm=this;
console.log("error"+error);
})
i only get html code without vue js code
how can i get both and save them bothin my databse?
this is html :
<div id="app" ref="foo">
<ul>
<li v-for="prod in products">
<h1 style="color:red">{{prod.fields.name}}</h1>
<p>{{prod.fields.description}}</p>
</li>
</ul>
<button #click="save">save</button>
</div>
Try prerendering using Nuxt.js or webpack with vue-server-renderer. Server side rendering helps you to get that elements expanded by Vue.js and you will be having fully rendered webpage.
Look at Vue - Server Side Rendering
I used get json in ionic.
$http.get($scope.webServiceUrl+"example.php")
.then(function(response){
$rootScope.lists = response.data;
});
I wrote the webservice with php
echo json_encode($data,JSON_HEX_TAG);
return json data and print page
text: "<h1>enes</h1>"
Json [{"id":"0","text":"<h1>enes</h1>"}]
jsonviewer Image
Result when I print to the page
enter image description here
Does not accept is html element. How can i solve?
I think you have to use ng-bind-html directive if you are sure it's safe and can be rendered as unencoded HTML.
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
I am trying to POST some values using my HTML form to a node JS method. Thereafter, I need to send the return result back from NODE JS and display it in the HTML page.
I am also using EJS to send back the values to the form. However, the result doesn't get displayed.
Basically, After the user clicks on the submit button on the HTML form, values should be passed to Node Js processed and send back a result Success or failed to the HTML doc where it'll display.
My code is as follows:
HTML CODE:
<form id="form-register" action="http://localhost:8089/ttt"" method="post" enctype="multipart/form-data">
<input type="logintext" value="" name="nam" class="nameC" id="mc" >
<input type="submit" name="subscribe" id="mc-submit-number">
<label >REEEEE <%= titles %></label>
</form>
NODE JS CODE:
app.post('/ttt', function (req,res){
loginProvider.signUp(params, function(err, data) {
if (err) {
res.render('index',{title: 'HOME',titles:err.stack
});
res.send('WHATTT');
}
else {
console.log('Result ' + data); // successful response
res.render('index',{title: 'HOME',titles:'SUCCESS'
});
res.end('xzxzxzxzxzx');
}
});
}
You could (or rather have to) use AJAX.
Then you can manually send your form parameters via post request to your Node server and return a response object with either an error or a success message.
The reason your code isn't working is because you have already loaded the DOM of the HTML page and when you are making that request the only way for EJS to work is if you reload the page since EJS just goes through your file and string replaces
My best solution is to have a normal AJAX call to your '/ttt' and have the Node.js do a 'res.send("SUCCESS");' and in your html you can set that label or any part of your document page to "SUCCESS"
With JQuery
$.post("/ttt", function(data, status){
$("#yourLabel").text(data);
});
Good day folks,
I am having an issue with Yii2, dunno whats goin on after searching online haven't found an answer.
Updated Question with more details
Here is a summary I am trying to change div content of my view via an ajax call to a controller action – the controller action I am calling does nothing but renders another view file which contains a Jui Tab.
The problem is it loads the home page + my Content at a lower part not processed.
If I visit the URL of the action that the ajax request calls, it displays properly with no issues – When I try to append it to my div on another view, this problem occurs.
Here are screenshots of my view
Page Displaying correctly on visiting URL
https://www.dropbox.com/s/77ovpl6fnznjs1p/Page%20displaying%20correctly%20on%20visiting%20URL.png?dl=0
Updating div with the rendered view displays content in a wrong manner
https://www.dropbox.com/s/6nld4wk1p9pkhz9/Screenshot%20of%20the%20update%20view.png?dl=0
A- Initial View Code
Here is my first view code – Contains a div that you click to fireup the ajax call and another div called content which gets the response
brense.PHP
<?php
use yii\helpers\Html;
use yii\jui\Tabs;
?> <div style="background: blue; cursor: pointer; width:100px;" id="brense">Click ME</div><div id="content">Content</div>
B- Ajax (JS File) `$('#brense').click(function(){
alert('click Received');
$.ajax({
url:'index.php?r=assignments/get-me2',
Type:'GET',
success:function(data){
alert("bombo");
$('#content').append('<div>Appended Content</div>');
$('#content').html(data);
}
});
});
`
C- Controller Action – Called by Ajax
public function actionGetMe2(){
return $this->renderAjax('tab');
}
D- Tab’s View that should be loaded inside the div content
<?php
use yii\helpers\Html;
use yii\jui\Tabs;
?>
<div>
<?php echo Tabs::widget(
['items'=>[
['label'=>'One','content'=>'Content 1'],
['label'=>'Two ','content'=>'Content 2'],
],
]
);
?>
</div>
Ok, here is the problem. Yii and Yii2 have an automatic numbering of elements. It has elements that are called w0, w1, w2. In a normal page you have w0 1 time, Yii takes care of that. Because you bring in code with Ajax, the page is actually a new page, so it has it's own w0 element. if you take a look at the code that it has it calls
$('#w0').tabs();
Now that works fine when you look at the page alone, but it will not work ok at all on your page because after inserting the content on the page you have 2 w0 elements. It basically calls the tab on the first one of them (in my test it was the nav bar) and that messes it up. The solution is to give the tabs an id.
So your tab.php file should be:
<?php
use yii\helpers\Html;
use yii\jui\Tabs;
?>
<div>
<?php echo Tabs::widget(
[
'id' => 'tabs',
'items'=>[
['label'=>'One','content'=>'Content 1'],
['label'=>'Two ','content'=>'Content 2'],
],
]
);
?>
</div>
This should solve your problem, but you migth have other problems too. Like loading jquery and jquery ui 2 times, 1 with the main page the other with your ajax. Now STOP using renderAjax you should use renderPartial.
Your code should be: in the main view file:
<?php
use yii\jui\JuiAsset;
JuiAsset::register($this);
?>
<div style="background: blue; cursor: pointer; width:100px;" id="brense">Click ME</div><div id="content">Content</div>
<?php
$script = <<<EOD
$('#brense').click(function(){
alert('click Received');
$.ajax({
url:'index.php?r=site/get-me2',
Type:'GET',
dataType: 'html',
success:function(data){
$('#content').html(data);
$('#tabs').tabs();
}
});
});
EOD;
$this->registerJs($script);
I am registering jquerui ui asset at the top, if you already have it loaded it will not load it again. I have a function that brings over the ajax, and that function also calls $('#tabs').tabs(); to actually create the jquery ui tabs.
Your controller
public function actionGetMe2(){
return $this->renderPartial('tab');
}