-
Notifications
You must be signed in to change notification settings - Fork 220
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use with WickedPDF or PDFKit. #27
Comments
Really nice to hear that! And I love the idea of generating PDFs with GridForms. It's a hard one to debug without the inspector. But if I were to guess, it's the viewport media query kicking in. I would try removing the media query in the CSS and try again. Love this btw, hope it works out 👍 |
Awesome, I'll give that a looky and let you know. If I come up with something straight forward, I'll update the README with a little blurb and send you a PR. |
@joshuapinter did you ever have any luck with this? I'm running into the same issue. I'm pretty new to sass so I'm having trouble figuring out what to remove to prevent the media queries from kicking in. |
@blaedj I haven't pursued it yet, actually. Just taking a cursory glance, it looks like you'll want to play with the I'll need this eventually so let me know how it goes. |
I'll take a look tomorrow and let you know, thanks! |
@joshuapinter I created a separate version of the gridforms.sass file that I use when generating the pdf, and made the following changes (using scss): $font-size-large: 12px; /** normally 18px */
$field-padding: 4px; /** normally 8px */
$label-font-size: 8px; /** normally 10px */
/** Removed width: 100%, could probably tweak the breakpoints but I didn't have
any luck regardless of the size I used */
[data-field-span] {
padding: $field-padding;
float: left;
@include _breakpoints(0, 700px) {
border-bottom: 1px solid $grid-border-color;
/** width: 100% !important; */
}
} There's still some work to be done, but it's a good start for what I need. |
@blaedj Nice one!! Thanks for sharing back. That's a great start. |
Great stuff @joshuapinter and @blaedj! I would find this very useful as well. What are the steps I have to take to get a PDF file with a GridForm on it? |
Hey @kumailht, we finally got around to getting GridForms working in PDF form and wanted to share our tweaks and see what your thoughts were on how, if at all, you wanted to incorporate it into the main library. First off, I love this library. It made our printed forms look effortlessly beautiful. Thanks for sharing this with the world. Here's what we were able to create: So, onto the changes. I created a simple DIFF to show the differences between the original kumailht/gridforms@master...joshuapinter:patch-1 Here are the main points:
That's about it so let me know if you're keen to incorporate this into GridForms, and how, and we'll clean this up and generate a proper PR for you. Thanks again. |
@joshuapinter I quite like the output and would be happy to integrate this with GridForms. Have you tried generating the PDF using the wkhtmltopdf (wkhtmltopdf.org) command line utility? I am interested in knowing if the CSS would need tweaking to work with it. |
IMO, the process for PDF generation should be as painless for the end user as possible. Preferably a one-liner that requires little to no configuration. |
Yup, I agree. My thinking is either a one-liner config setting OR override some CSS when printing. Just like I found, using the wkhtmltopdf command line generates a similar, unusable result. For example, your bank application page produces the following:
Let me take a look at it and I'll see if I can clean it up for a PR. |
@joshuapinter Do you get the same broken output with your customised CSS? |
Nope, you get a beautiful output, like the sample I posted previously. But, the CSS changes we made break the web-view of it. |
Here is my attempt at generating a WickedPDF like output with wkhtmltopdf, but this was the best I could do: output.pdf If we can get a reliable PDF output using a customised version of the CSS file, we could add that custom version to the project. Is that what you had in mind as well? |
Yep, that's what I was thinking as well. Your version looks pretty good. Let me play with it a bit and see if we can get a reliable, good looking CSS that works with WickedPDF and wkhtmltopdf. Thanks for following up! :) |
Thanks Joshua! |
Alright so the second round of experiments worked out a much better result!
body {width: 1000px}
.gridforms label:first-child {letter-spacing: 0 !important}
|
Oh nice one, @kumailht! That looks fantastic. So the only thing not accounted for with these changes is handling multi-line content in each cell instead of a form If all you want to do is print an empty form for someone to fill out then your changes do the trick. If you're looking to use it as a way to organize information, then it breaks down with multi-line content. What do you think? |
Excellent point @joshuapinter. Question, would a few more lines of CSS be enough to make the PDF generation work for forms with content? |
I think so, but I'm not sure how it affects it for web rendering. Maybe you can test it. Here are the two changes I had to make to make it work with content, not
The first one is a fairly large layout change but see what it looks like. |
I have two solutions in mind:
Happy to hear if you have any ideas or if you prefer one of the above over the other |
Even better, you can use a I added the following styles under the @media print
[data-row-span]
display: table
height: 56px
page-break-inside: avoid
[data-field-span]
border-right: 1px solid #333333
display: table-cell
float: none
&.focus,
&:hover
background: none
label:first-child
letter-spacing: 0 And ran the following wkhtmltopdf command in the console: wkhtmltopdf --print-media-type 'Grid Forms · Example - Personal Bank Account Initial Application.html` ~/Downloads/myoutput37.pdf And here is the result: By the way, I'll generate a quick PR with these changes to Let me know what you think. |
That's an excellent solution, I love it! Just one questions, does this render well when you try to print (the traditional 'ctrl + p' print) it? |
Great job on the feature Joshua. I'll definitely be using this big time and pretty sure it will be popular among the community! Will test and merge your pull request soon. |
First off, fantastic little project. I think these forms are the sexiest I've come across and make entering data (almost) fun.
I'm trying to use Gridforms with WickedPDF to generate a 1-page printable form but the width of the form seems to be messed up.
With the following default markup:
It produces something like this in the PDF:
I'd love to be able to generate PDFs using Gridforms. I'm sure others would too.
Any thoughts on this?
Many Thanks!
Josh
The text was updated successfully, but these errors were encountered: