Home > Article > Backend Development > Go ChromeDP ignores any external or internal CSS during printing to pdf, only uses the CSS from the html file
Go ChromeDP ignores any external or internal CSS during printing to pdf, only uses the CSS from the html file
- PHPzforward
- 2024-02-10 14:42:09625browse
php Xiaobian Youzi will introduce to you a tool called Go ChromeDP, which can ignore all external and internal CSS styles during the process of printing web pages to PDF, only Use CSS styles from HTML files. This tool can help developers better control the style of PDF output and provide more flexible customization options. With Go ChromeDP, we can easily generate high-quality PDF documents that meet our needs, providing better user experience and functionality for our projects. Next, let us learn about the usage and features of Go ChromeDP!
Question content
go chromedp does not use any css, neither internal nor external styles (only styles written in html, not other files). The method I use
page.setdocumentcontent(frametree.frame.id, string(buf.bytes())).do(ctx)
Add the html file to chromedp, and
buf, _, err: = page.printtopdf().do(ctx)
if err != nil {
return err
}
_, err = outputbuf.write(buf)
if err != nil {
return err
}
Print to pdf, but the resulting pdf has no styles (even using an external css file server). I tried adding it using page.getresourcetree().do(ctx) css.createstylesheet(resourcetree.frame.id).do(ctx)
css.SetStyleSheetText(stylesheet, `.c {
color: red;
font-size: 30px;
background-color: aqua;
}
`).Do(ctx)
It does work, but it's hard to use it every time I want to generate a pdf, especially in my case since I'm using html from html/template. Maybe there is an easy way to add external css to a single html file? what do you think?
Thank you for your answer
Bohdan
I want to use chromedp to convert a go template with external css, images and fonts to pdf, but it ignores anything outside the main html file.
Solution
Please note that loading external resources takes some time. You should wait for them to load. When the page is ready, the page.loadeventfired event is raised. So we can wait for this event and then print the page. See demo below:
package main
import (
"context"
"fmt"
"log"
"net/http"
"net/http/httptest"
"os"
"sync"
"time"
"github.com/chromedp/cdproto/page"
"github.com/chromedp/chromedp"
)
func main() {
ts := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
// Simulate a network latency.
time.Sleep(2 * time.Second)
w.Header().Set("Content-Type", "text/css")
fmt.Fprint(w, `h1 {font-size: 100pt; color: red;}`)
}))
defer ts.Close()
ctx, cancel := chromedp.NewContext(context.Background())
defer cancel()
// construct your html
html := `<html>
<head>
<link rel="stylesheet" href="%s/style.css">
</head>
<body>
<h1> Hello World! </h1>
</body>
</html>
`
var wg sync.WaitGroup
wg.Add(1)
if err := chromedp.Run(ctx,
chromedp.Navigate("about:blank"),
// setup the listener to listen for the page.EventLoadEventFired
chromedp.ActionFunc(func(ctx context.Context) error {
lctx, cancel := context.WithCancel(ctx)
chromedp.ListenTarget(lctx, func(ev interface{}) {
if _, ok := ev.(*page.EventLoadEventFired); ok {
wg.Done()
// remove the event listener
cancel()
}
})
return nil
}),
chromedp.ActionFunc(func(ctx context.Context) error {
frameTree, err := page.GetFrameTree().Do(ctx)
if err != nil {
return err
}
return page.SetDocumentContent(frameTree.Frame.ID, fmt.Sprintf(html, ts.URL)).Do(ctx)
}),
// wait for page.EventLoadEventFired
chromedp.ActionFunc(func(ctx context.Context) error {
wg.Wait()
return nil
}),
chromedp.ActionFunc(func(ctx context.Context) error {
buf, _, err := page.PrintToPDF().Do(ctx)
if err != nil {
return err
}
return os.WriteFile("sample.pdf", buf, 0644)
}),
); err != nil {
log.Fatal(err)
}
log.Println("done!")
}
Reference:https://www.php.cn/link/13c86fac19a52dbc843105b709dc71fc一个>.
The above is the detailed content of Go ChromeDP ignores any external or internal CSS during printing to pdf, only uses the CSS from the html file. For more information, please follow other related articles on the PHP Chinese website!