I'm using html2pdf bundle to generate pdf File. I followed the documentation. The bundle works fine my pdf is generate. But the css is ignored. I've my css in an external file and bootstrap cdn. But there is not changes.
However I create a route to the view supposed to be converted in PDF, and the css works fine in the HTML view.
My controller :
public function invoicPdfAction($id){
$em = $this->getDoctrine()->getManager() ;
$invoic = $em->getRepository('EcommerceBundle:Orders')->findOneBy(
array(
'user' => $this->getUser(),
'validate' => 1,
'id' => $id
));
if(!$invoic){
$this->addFlash('danger', 'La facture n\'existe pas ');
return $this->redirect($this->generateUrl('_invoic_user'));
}
$html = $this->renderView('UsersBundle:Public:User/invoicPDF.html.twig', array('invoic'=>$invoic));
$html2pdf = $this->get('html2pdf_factory')->create();
$html2pdf->pdf->SetDisplayMode('real');
$html2pdf->pdf->setSubject('Facture : My E-Commerce');
$html2pdf->pdf->setTitle('Facture : n°'. $invoic->getReference());
$html2pdf->writeHTML($html);
$html2pdf->Output('invoic.pdf') ;
return new Response($html2pdf->Output('invoic.pdf'), 200, array('Content-Type' => 'application/pdf'));
}
My view invoicPDF.html.twig
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facture</title>
<link rel="stylesheet" href="{{ asset('css/style_invoic.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahauwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<h1> Facture de la commande n° : {{ invoic.reference }} </h1>
</div>
....
</div>
</body>
</html>
config.yml
ensepar_html2pdf:
orientation: P
format: A4
lang: fr
unicode: true
encoding: UTF-8
margin: [10,15,10,15]
What I missed ?
Thanks in advance
html2pdf ignore the extern files
You must do write your css in your pdf thanks to : /* css */
Related
When I change the pages without loading them in the cache with service workers there are no problems when I go to save the pages in the cache they are no longer found both online and offline. The problem occurs only with pages and not with other elements such as .jpg .png .js .css and some .html elements
When i go to another page after i saved it in the cache
Unable to reach site The web page at link of the page may be temporarily unavailable or has been permanently moved to a new web address.
ERR_FAILED
Service Workers
const staticChacheName = 'site-static'
const assets = [
'/',
'/index.html',
'/Html/Elements/footer.html',
'/Html/Elements/mobile_menu.html',
'/Html/Elements/navbar.html',
'/Html/Pages/film.html', //not working
'/Html/Pages/anime.html', //not working
'/Html/Pages/sitobello.html', //not working
'/Html/Pages/song.html', //not working
'/Html/Pages/amici_home.html', //not working
'/Html/Pages/Amici/tilde.html', //not working
'/Html/Pages/Amici/kloe.html', //not working
'Css/Index/style.css',
'Css/Sito Bello/background.css',
'Css/Sito Bello/section.css',
'Css/Sito Bello/settings.css',
'Css/Song/background.css',
'Css/Song/elementi.css',
'Css/Film/background.css',
'Css/Film/elementi.css',
'Css/Anime/background.css',
'Css/Anime/elementi.css',
'Css/Element/footer.css',
'Css/Element/mobile_menu.css',
'Css/Element/navbar.css',
'Css/Element/scrollbar.css',
'Css/Amici/Home/background.css',
'Css/Amici/Home/elementi.css',
'Css/Amici/Kloe/background.css',
'Css/Amici/Tilde/background.css',
'/Images/Logo.png',
'/Images/Index/background.jpg',
'/Javascript/Element/navbar.js',
'/Javascript/Film/add.js',
'/Javascript/Sito Bello/add.js',
'/Javascript/Sito Bello/settings.js',
'/manifest.webmanifest',
'/Javascript/app.js',
]
//install service worker
self.addEventListener('install', evt => {
// console.log('service worker has been installed')
evt.waitUntil(
caches.open(staticChacheName).then(chache => {
console.log('chaching shell assets')
chache.addAll(assets)
}))
})
//activate service worker
self.addEventListener('activate', evt => {
// console.log('service worker has been activated')
})
self.addEventListener('fetch', evt => {
//console.log('fetch event', evt)
evt.respondWith(
caches.match(evt.request).then(chacheRes => {
return chacheRes || fetch(evt.request)
})
)
})
Example of a page that doesn't work
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="/Css/Element/navbar.css">
<link rel="stylesheet" href="/Css/Element/mobile_menu.css">
<link rel="stylesheet" href="/Css/Film/background.css">
<link rel="stylesheet" href="/Css/Film/elementi.css">
<link rel="stylesheet" href="/Css/Element/footer.css">
<link rel="stylesheet" href="/Css/Element/scrollbar.css">
<link rel="manifest" href="/manifest.webmanifest">
<link rel = "icon" href = "/Images/Logo.png" type = "image/x-icon">
<title>Aside - Film</title>
</head>
<body>
<nav></nav>
<div id="mb-menu"></div>
<h1 id="title">Film</h1>
<div id="films">
<!-- aggiunge film -->
</div>
<footer></footer>
<script src="/Javascript/app.js"></script>
<script src="/Javascript/Film/add.js"></script>
<script src="/Javascript/Element/navbar.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function(){
$("nav").load("/Html/Elements/navbar.html");
$("footer").load("/Html/Elements/footer.html");
$("#mb-menu").load("/Html/Elements/mobile_menu.html");
});
</script>
</body>
</html>
Site structure
what am I doing wrong? because I would like my site to work offline too but not being able to load the other pages it works only in the home
I just installed a clean Laravel project with the Jetstream starter kit, so it also installed Tailwind CSS.
I then tried to use the sample code from Tailwind but it won't show up.
This is my simple test code from the Tailwind docs: (from https://tailwindcss.com/docs/hover-focus-and-other-states)
app.blade.php: (You can run the code snippet because this is actually what I get in my project)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<button class="bg-red-500 hover:bg-red-700">
Hover me
</button>
</body>
</html>
this is the tailwind.config.js file:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography')],
};
this is the webpack.mix.js file:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
and this is the app.css file:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
run npm run dev or npm run watch to compile the assets if you didn't already.
You should first run this command npm run dev then run php artisan serve
I see vuetify project have title bar. But the title in public/index.html. Outside src folder
So I had trouble making it dynamic. Every page must have different title. If it's same, it's very influential on SEO
My public/index.html like this :
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>test-vuetify</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but test-vuetify doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
How can I solve this problem? I want to make title on every page is different. According to page content
Hard to tell exactly what your constraints are from the question, but in case this helps anyone else make their Vuetify title bar dynamic...
In index.js, add some "meta" to the routes:
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/page1',
name: 'page-1',
component: ...,
meta: {
title: 'Page 1'
}
},
{
path: '/page2',
name: 'page-2',
component: ...,
meta: {
title: 'Page 2'
}
}
]
const router = new VueRouter({
mode: 'history',
base: (your base url),
routes: routes,
});
export default router
Then in the Vuetify title bar, use the route meta defined above:
<v-toolbar-title>{{ $route.meta.title || "Default title" }}</v-toolbar-title>
I am a newbie of spring boot. The below image shows the folder location of my bootstrap css file and jquery js file on spring boot thymeleaf template.
And these are my home html scripts
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<div th:fragment="header-css">
<title>Spring Boot Blog</title>
<script th:src="#{/js/jquery-2.1.4.min.js}"></script>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" th:href="#{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="/css/main.css" th:href="#{/css/main.css}" />
</div>
</head>
<body>
<div th:fragment="header">
.....
But css and js scripts are not linked at all.
Any idea, please!
== UPDATED ==
I am evaluating the spring blog example. I think my problem is related to login controller. First this is the login controller codes.
#Controller
public class LoginController {
#GetMapping("/login")
public String login(Principal principal) {
String username = (principal != null ? principal.getName() : "ANONYMOUS");
if(principal != null) {
return "redirect:/home";
}
// ALWAYS PRINTING "ANONYMOUS is WRONG!!!!"
System.out.println(username + " is WRONG!!!!");
return "/login";
}
}
And even more
return "/login"
line brings wrong files. In below login.html file,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<div th:replace="/fragments/header :: header-css"/>
</head>
<body>
<div th:replace="/fragments/header :: header"/>
<div class="container">
<div class="row" style="margin-top:20px">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form th:action="#{/login}" method="post">
<fieldset>
the controller call the following css file and display its contents.
<link rel="stylesheet" type="text/css" href="/css/main.css" th:href="#{/css/main.css}" />
I'm using lighhtpd with php. Work with Zend Framework.
I put a simple page test.html with only HTML code. When I try to see it, I get an error:
Invalid controller specified (test.html): /test.html
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>TODO write content</div>
</body>
</html>
On my conf (not htaccess)
url.rewrite-once = (
".*\?(.*)$" => "/index.php?$1",
".*\.(js|ico|gif|jpg|png|css)$" => "$0",
"" => "/index.php"
)
I'm lost. Try several option and not understand the problem.
Well.
Apologize for question.
Simple.
url.rewrite-once = (".*\?(.*)$" => "/index.php?$1",".*\.(js|ico|gif|jpg|png|css)$" => "$0","" => "/index.php")
Changed to
url.rewrite-once = (".*\?(.*)$" => "/index.php?$1",".*\(js|ico|gif|jpg|png|css|html)$" => "$0","" => "/index.php")