I actually generate PDF with WickedPDF on my app. And now I just want to include an image "logo.jpg" on the header of my PDF.
I tried lot of things, and I think my problem come from assets.
My Controller :
def generate_pdf
pdf = WickedPdf.new.pdf_from_string(
render_to_string(
template: 'pdf/pdf_view.pdf.erb',
layout: 'layouts/application.pdf.erb'))
send_data(pdf,
filename: 'file_name.pdf',
type: 'application/pdf',
disposition: 'attachment')
end
layouts/application.pdf.erb :
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body onload='number_pages'>
<div id="content">
<%= yield %>
</div>
</body>
</html>
pdf/pdf_view.pdf.erb :
<div>
<p>Just a simple text on my pdf that is correctly displayed</p>
<%= wicked_pdf_image_tag "images/logo.jpg", :width=>"250", :height=>"200" %>
</div>
And in my console :
Rendering pdf/pdf_view.pdf.erb within layouts/application.pdf.erb
Rendered pdf/pdf_view.pdf.erb within layouts/application.pdf.erb (2.7ms)
[wicked_pdf]: ["/home/vincent/.rvm/gems/ruby-2.7.1/bin/wkhtmltopdf", "file:////tmp/wicked_pdf20210503-14279-o2q5ol.html", "/tmp/wicked_pdf_generated_file20210503-14279-1om4oam.pdf"]
source=rack-timeout id=cfb572c3-5919-47c1-b32c-cc3bf724b9bf timeout=15000ms service=1000ms state=active
Rendering text template
Rendered text template (0.1ms)
Sent data file_name.pdf (1.5ms)
Completed 200 OK in 1140ms (Views: 1.1ms | ActiveRecord: 1.1ms)
So my question is : Do you have an other method to display an image on a generated pdf ? Or is my method wrong ?
Problem solved, the right command to display my images on the pdf is :
image_tag wicked_pdf_asset_base64
Related
I am wondering if there is a way to render http response that is html in a new page or in a new component? The specific problem is described below.
code to call the backend:
const headers = { 'content-type': 'application/x-www-form-urlencoded'}
let obs = this.http.post<any>("http://localhost:8080/project/Raffle", _data,{ headers, responseType: 'text' as 'json'});
obs.subscribe((response)=>console.log(response));
The response is an html page displayed in the console.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Thank you for taking the survey! You win the raffle of two movie tickets!</title>
</head>
<body>
...
</body>
</html>
My question is how may I render the content in a new component or possibly as a new html page?
Many thanks!
You should be able to create a template using the output and Handlebar.js and display it as an html page.
Please refer to this resources=>
https://www.npmjs.com/package/handlebars
https://handlebarsjs.com/
Has anyone used the Adobe Creative SDK yet? I registered my site and received the api key and plugged into my web page. It is extremely simple, basically copying their example and using my own image except i keep getting the following error:
"There was a problem loading the image URI provided to the 'url' config key. Please verify that the URI is publicly accessible, and that the image is a supported format."
I checked the Adobe site with no luck and I have a small 354 x 384 image i am using.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aviary Test</title>
<!-- Load Feather code -->
<script type="text/javascript" src="http://feather.aviary.com/imaging/v3/editor.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: 'MY KEY',
theme: 'dark', // Check out our new 'light' and 'dark' themes!
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
</head>
<body>
<div id='injection_site'></div>
<img id='image1' src='desert.jpg'/>
<!-- Add an edit button, passing the HTML id of the image and the public URL of the image -->
<p><input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'Desert.jpg');" /></p>
</body>
</html>
I am having the same problem.
Everything works, but when you try to load an image from a different location you get the "there was a problem loading the image uri provided to the 'url' config key" error.
My site looks like this:
full (full sized image folder)
thumb (folder)
index.html
You can see the error here: http://koffid.nl/memetests/sdk2/
When you use the Edit Photo button which uses an external URL to the image it works.
When you click on the image which uses my file structure instead of the button the error shows up.
So this doesn't work:
<img id='image1' src='thumb/feather_thumb.jpg' value='Edit photo' onclick="return launchEditor('image1', 'full/feather_default.jpg');" /></p>
And this does work:
<p><input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p>
You can't use a relative url, you need to pass the full url of the image, ie. http://example.com/images/myimage.jpg
In custom_colors.css.erb file is:
<%
WebsiteSetting.last.link_color.present? ? (link_color = WebsiteSetting.last.link_color) : (link_color = '#0088cc')
%>
$custom_link: <%= link_color %>;
and in many css files i'm using $custom_link variable, but when i update WebsiteSetting.last by setting link_color field by colorpicker (hex), nothing changes in views. I suppose the problem is with precompiling custom_colors.css.erb file after request.
Dynamic assets precompilation (on each request) is normally done in development environment only for debugging reasons.
If you want to be able to use some request-dependent styles consider moving that code to the application layout:
application.html.erb:
<!DOCTYPE html>
<html lang="en">
<head>
...
<style type="text/css">
#my_div {
color: <% WebsiteSetting.last.link_color.present? ? WebsiteSetting.last.link_color : '#0088cc' %>;
}
</style>
...
</head>
<body>
...
</body>
</html>
Hi I am using MVC Mailer to manage creating and sending emails in my application. It will create and send the email fine but any html I insert inside the body in the layout is not in the email.
Mailer
public class Mailer : MailerBase, IMailer
{
public aMailer()
{
MasterName = "_EmailLayout";
}
public virtual MvcMailMessage RequestAccess(RequestAccessViewModel viewmodel)
{
ViewData.Model = viewmodel;
return Populate(x =>
{
x.Subject = "RequestAccess for Data";
x.ViewName = "RequestAccess";
x.To.Add("AppTeam#groups.hp.com");
x.From = new MailAddress(viewmodel.Email);
});
}
}
I am setting it to use _EmailLayout here, I cahnged the name after seeing that there was an issue with naming it _Layout because it would conflict with any other files named _Layout.
_EmailLayout
<html>
<head>
</head>
<body>
<h1>Mailer</h1>
#RenderBody()
Thanks
</body>
The contents of the H1 tag or "Thanks" are not in the email
Access.cshtml
<h3>"This is a Application email." </h3>
<p>#Model.Message</p>
<br/>
<p>Regards</p>
<p>#Model.Name</p>
<p>Business Area: #Model.BusinessArea</p>
Email Source
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii"><title></title>
</head>
<body>
<p> Hi jeff test,</p>
<br>
<p>Thank you for your enquiry about the Application.</p>
<br>
</body>
Has anyone come across this issue before? When I debug my application I can see that it is going into the _EmailLayout but I don't know why the HTML in that files is not rendered.
After posting the following issue on the github page for MVC Mailer
Changing the layout code to this fixed the problem
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
Mailer
#RenderBody()
Thanks
</body>
</html>
I'm not sure why this fixed the problem but it did.
When I view my Rails (3.1) app in Internet Explorer, for some reason it sometimes shows bits of html tags at the end of my page, but it doesn't do this in Chrome or Firefox. In particular, it shows part of the tag - never the full tag, but part - like </h or </htm - in the view as text (at the bottom of the page).
In my layout template, I do have this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%= title %></title>
<% if params[:controller] == 'pages' %>
<%= stylesheet_link_tag "static_pages", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" %>
<% elsif %>
<%= stylesheet_link_tag "bootstrap", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" %>
<% end %>
<%= javascript_include_tag "https://ws.sharethis.com/button/buttons.js", "admin.js" %>
<%= csrf_meta_tag %>
<script type="text/javascript" charset="utf-8">
//jQuery.noConflict();
jQuery.extend( jQuery.fn.dataTableExt.oStdClasses, {
"sSortAsc": "header headerSortDown",
"sSortDesc": "header headerSortUp",
"sSortable": "header"
} );
jQuery(document).ready(function() {
jQuery('#datatable').dataTable( {
"sDom": "<'row'<'span5'l><'span8'f>r>t<'row'<'span4'i><'span8'p>>",
"sPaginationType": "bootstrap"
} );
} );
</script>
<%= yield :javascript%>
<%= yield :script%>
</head>
<body>
</body>
</html>
When I look at the html source code generated for the view, I notice that the Chrome/Firefox the source concludes with </body> and not </html> (or any partial code like IE).
Can someone please let me know what I'm doing wrong? Thank you.
An empty Head tag will not be recognized as well formed (closed ) unless it contains a mandatory child
( as defined in the DTD of the doctype 'Transitional' you are using. )
Give it a title
<head>
<title>A Title</title>
</head>
I think this is mandatory for all doctypes ( but don't quote me on that ) - but mute point too - every web page should have a title.
Update: Says title is present, still sounds like a "well formed" issue though ..
1) Run, view source and copy all the code into notepad/simular and save that as test.html ( this will highlight any chars that are not correct like ( " ) etc ..
2) Upload your test.html into the w3c validator service w3c Validator service
That should give some good clues
hope that cracs it