Go ChromeDP ignores any external or internal CSS during printing to pdf, only uses the CSS from the html file-Golang-php.cn

Go ChromeDP ignores any external or internal CSS during printing to pdf, only uses the CSS from the html file

PHPz

Release： 2024-02-10 14:42:09

forward

700 people have browsed it

Go ChromeDP 在打印到 pdf 期间忽略任何外部或内部 CSS，仅使用 html 文件中的 CSS

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)

Copy after login

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
}

Copy after login

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)

Copy after login

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!")
}

Copy after login

Reference://m.sbmmt.com/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!