使用wkhtmltopdf从HTML生成Google Web字体和PDF（chrome html document怎么改成pdf）

25-04-08 3

对于使用wkhtmltopdf从HTML生成GoogleWeb字体和PDF感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解chromehtmldocument怎么改成pdf，并且为您提供关于

对于使用wkhtmltopdf从HTML生成Google Web字体和PDF感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解chrome html document怎么改成pdf，并且为您提供关于c# – 使用WKHTMLTOPDF以HTML格式显示图像,但不以PDF格式显示、C#使用wkhtmltopdf，把HTML生成PDF（包含分页）、django+wkhtmltopdf后端生成pdf、Heroku上的字体使用wicked_pdf / wkhtmltopdf的宝贵知识。

本文目录一览：

使用wkhtmltopdf从HTML生成Google Web字体和PDF（chrome html document怎么改成pdf）
c# – 使用WKHTMLTOPDF以HTML格式显示图像,但不以PDF格式显示
C#使用wkhtmltopdf，把HTML生成PDF（包含分页）
django+wkhtmltopdf后端生成pdf
Heroku上的字体使用wicked_pdf / wkhtmltopdf

使用wkhtmltopdf从HTML生成Google Web字体和PDF（chrome html document怎么改成pdf）

如何解决使用wkhtmltopdf从HTML生成Google Web字体和PDF？

通过wkhtmltopdf尝试避免woff字体将HTML转换为PDF 。使用with 编码的truetype格式。Google Web Fonts``base64

最近，我尝试使用Google Web字体中的Google网络字体。在浏览器中，它可以正确显示，但是在将HTML转换为PDF后不会显示。

广泛搜索网络后，终于找到了将字体编码为base64格式的工具，并获得了CSS @font-face。

解决方法

我正在使用wkhtmltopdf将PDF文件转换为HTML文件；它提供了令人惊讶的良好结果，完全像WebKit那样呈现PDF。

我正在使用GoogleWeb字体使用户可以自定义他们编辑的文档的外观，从而使他们可以在几种字体之间进行选择。它也可以
在浏览器中 完美运行。

问题是，使用wkhtmltopdf将此类HTML文件转换为PDF时，我无法使用Google字体。我读过其他人也有同样的问题。

谁能帮我解决这个问题？

编辑：直接在CSS中声明@ font-face也不起作用。

c# – 使用WKHTMLTOPDF以HTML格式显示图像,但不以PDF格式显示

您正在使用Wkhtmltopdf使用c#,Asp.net从Html页面创建PDF.
PDF创建顺利,但是当我将图像添加到HTML时,它不会显示在PDF上.

public static string HtmlToPdf(string pdfOutputLocation,string outputFilenamePrefix,string[] urls,string[] options = null,// string pdfHtmlToPdfExePath = "C:\\Program Files (x86)\\wkhtmltopdf\\wkhtmltopdf.exe")

       string pdfHtmlToPdfExePath = "C:\\Program Files\\wkhtmltopdf\\wkhtmltopdf.exe")
    {
        string urlsSeparatedBySpaces = string.Empty;
        try
        {
            //Determine inputs
            if ((urls == null) || (urls.Length == 0))
                throw new Exception("No input URLs provided for HtmlToPdf");
            else
                urlsSeparatedBySpaces = String.Join(" ",urls); //Concatenate URLs

            string outputFolder = pdfOutputLocation;
            string outputFilename = outputFilenamePrefix + "_" + DateTime.Now.ToString("yyyy-MM-dd-hh-mm-ss-fff") + ".PDF"; // assemble destination PDF file name

            var p = new System.Diagnostics.Process()
            {
                StartInfo =
                {
                    FileName = pdfHtmlToPdfExePath,Arguments = ((options == null) ? "" : String.Join(" ",options)) + " " + urlsSeparatedBySpaces + " " + outputFilename,UseShellExecute = false,// needs to be false in order to redirect output
                    RedirectStandardOutput = true,RedirectStandardError = true,RedirectStandardInput = true,// redirect all 3,as it should be all 3 or none
                    WorkingDirectory = HttpContext.Current.Server.MapPath(outputFolder),CreateNowindow = true
                }
            };

            p.Start();

            // read the output here...
            var output = p.StandardOutput.ReadToEnd();
            var errorOutput = p.StandardError.ReadToEnd();

            // ...then wait n milliseconds for exit (as after exit,it can't read the output)
            p.WaitForExit(60000);

            // read the exit code,close process
            int returnCode = p.ExitCode;
            p.Close();

            // if 0 or 2,it worked so return path of pdf
            if ((returnCode == 0) || (returnCode == 2))
                return outputFolder + outputFilename;
            else
                throw new Exception(errorOutput);
        }
        catch (Exception exc)
        {
            throw new Exception("Problem generating PDF from HTML,URLs: " + urlsSeparatedBySpaces + ",outputFilename: " + outputFilenamePrefix,exc);
        }
    }

这是我显示图片的HTML代码区域..

<div id="Image">

  <img id="logoImage" runat="server" width="100%" height="100%" src="../Templogo/chafa.jpg" />

解决方法

尝试为图像src添加完整路径.这通常是由于“../Templogo/chafa.jpg”实际上并不是wkhtmltopdf工作目录的正确相对URL.

所以,而不是“../Templogo/chafa.jpg”尝试“C：/yourpath/Templogo/chafa.jpg”或“file：/// C：/yourpath/Templogo/chafa.jpg”,看看是否有帮助.如果是这样,你的相对路径就是问题所在.

C#使用wkhtmltopdf，把HTML生成PDF（包含分页）

最近花了2天多的时间终于把HTML生成PDF弄好了。步骤如下：

1、首先是技术选型。看了好多都是收费的就不考虑了。

免费的有：

jsPDF（前端生成，清晰度不高，生成比较慢）
iText（严格要求html标签。这个好像也是收费的）
wkhtmltopdf（简单、配置选项多、生成快、支持跨平台、也支持HTML生成图片）

因此选择wkhtmltopdf。

2、前期准备，首先需要下载wkhtmltopdf.exe（下载地址：https://wkhtmltopdf.org/downloads.html）阅读配置参数（https://wkhtmltopdf.org/usage/wkhtmltopdf.txt）

常用参数：

-T 0 ：设置上下左右margin-top=0（-B 0 -L 0 -R 0 -T 0，上下左右都设置一下）
-s A4：设置A4纸大小，默认A4
--disable-smart-shrinking：禁止缩放（不设置这个，生成的pdf会缩放）
--zoom 1：设置缩放系数，默认为1。如果--disable-smart-shrinking设置了，--zoom就不用设置了。
--cookie name value：设置cookie，如果下载的url需要登录（用cookie），那么这个参数很重要。

3、设置需要打印的页面（核心是分页）

A4纸大小：210mm×297mm，因此页面的每个div大小也是A4纸大小。

这里的页面设置很重要。另外，设置了分页的页码，示例如下：

<style>
#view {
    height: 100%;
    margin: auto;
    padding: 0;
    width: 210mm;
}

/*设置A4打印页面*/
/*备注：由于@是否特殊符号，样式放在css文件中没问题，放在cshtml文件就不行了，需要@@。*/
@preview-item {
    size: A4;
    margin: 0;
}
 
@media print {
    .preview-item {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}
.preview-item {
    width: 100%;
    height: 297mm;
    position: relative;
}

.page-view {
    position: absolute;
    width: 100%;
    text-align: center;
    height: 60px;
    line-height: 60px;
    bottom: 0;
}
</style>

<div id="view">
    <div class="preview-item">
        <div class="preview-item-body">这是第一页</div>
        <div class="page-view">1/3</div>
    </div>
    <div class="preview-item">
        <div class="preview-item-body">这是第二页</div>
        <div class="page-view">2/3</div>
    </div>
    <div class="preview-item">
        <div class="preview-item-body">这是第三页</div>
        <div class="page-view">3/3</div>
    </div>
</div>

4、C#代码实现（核心是Arguments的设置）

/// <summary>
        /// HTML生成PDF
        /// </summary>
        /// <param name="url">url地址（需要包含HTTP://）</param>
        /// <param name="path">PDF存放路径（可以是aaa.pdf，也可以用路径，只能是绝对地址，如：D://aaa.pdf）</param>
        public static bool HtmlToPdf(string url, string path)
        {
            path = HttpContext.Current.Server.MapPath(path);string cookie = "cookieKey cookieValue";//改为为你自己的
            string Arguments = "-q  -B 0 -L 0 -R 0 -T 0 -s A4 --no-background --disable-smart-shrinking --cookie " + cookie + " " + url + " " + path; //参数可以根据自己的需要进行修改

            try
            {
                if (string.IsNullOrEmpty(url) || string.IsNullOrEmpty(path))
                    return false;
                var p = new Process();
                string str = HttpContext.Current.Server.MapPath("/htmlToPDF/wkhtmltopdf.exe");
                if (!File.Exists(str))
                    return false;
                p.StartInfo.FileName = str;
                p.StartInfo.Arguments = Arguments;
                p.StartInfo.UseShellExecute = false;
                p.StartInfo.RedirectStandardInput = true;
                p.StartInfo.RedirectStandardOutput = true;
                p.StartInfo.RedirectStandardError = true;
                p.StartInfo.CreateNoWindow = false;
                p.Start();
                p.WaitForExit();
                System.Threading.Thread.Sleep(1000);

                return true;
            }
            catch (Exception ex)
            {
                LogHelper.WriteError(ex);
            }
            return false;
        }

方法的调用：

string url = Request.Url.AbsoluteUri.Replace("DownloadPDF", "Detail");//DownloadPDF是下载页面，Detail是上面的HTML页面
            string pdfDirectory = "/Data/PDF/";
            if (!System.IO.Directory.Exists(HttpContext.Current.Server.MapPath(pdfDirectory)))
            {
                System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath(pdfDirectory));
            }
            string path = pdfDirectory + Guid.NewGuid() + ".pdf";
            HtmlToPdf(url, path);

            if (!System.IO.File.Exists(Utils.GetMapPath(path)))//如果生成失败，重试一次
            {
                HtmlToPdfHelper.HtmlToPdf(url, path);
            }

            if (!System.IO.File.Exists(Utils.GetMapPath(path)))//如果生成失败，重试一次
            {
                HtmlToPdfHelper.HtmlToPdf(url, path);
            }

5、ok，采坑结束~

django+wkhtmltopdf后端生成pdf

在写系统时，总是会遇见需要给用户提供pdf下载的功能，实际上pdf生成方式多种多样，有前端生成pdf也有后端生成pdf的方式。在之前已经有写过生成pdf的文章，之前是使用php调用wkhtmltopdf方式，部署在windows上，这一次使用django搭建后台，部署在ubuntu上，并且生成的pdf中有echarts绘制的图，所以写一篇新的文章，有兴趣的可以去我看看之前写过的文章最完美的html转化为pdf的方法

wkhtmltopdf安装

wkhtmltopdf是一个使用 Qt WebKit 引擎做渲染的，能够把html 文档转换成 pdf 文档或图片(image) 的命令行工具，支持多个平台，可在win，linux，os x 等系统下运行。

多平台的优势让你可以无痛切换系统使用

可以前往官网下载符合条件的安装包wkhtmltopdf下载官网

我这边服务器是ubuntu20.04，直接使用命令wget https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.focal_amd64.deb下载安装包。（有时候命令行很酷，但是被网速限制死，选择好能下载的方式）

下载晚使用进行安装sudo dpkg -i wkhtmltox_0.12.6-1.focal_amd64.deb

输入 wkhtmltopdf -V显示版本号即安装成功

这是一个命令行工具，可以简单地拿百度主页尝试一下wkhtmltopdf http://baidu.com test.pdf

在当前目录下出现一个test.pdf，直接看见效果。

python调用wkhtmlpdf

现在只需要用python代码来执行该软件就能生成pdf，将pdf提供给用户下载，后台框架使用的是django，python控制wkhtmltopdf十分方便，只需要安装一个包，pip install pdfkit

先简单的写一个html界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <button>点击我下载</button>
</body>
</html>

控制器views.py代码

from django.shortcuts import render
def test(request):
    return render(request, ''index/test.html'')

路由规则urls.py代码

path(''test'', views.test),

显示界面

这个时候为点击按钮赋予一个点击事件，向下载pdf界面请求pdf下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <button id="download">点击我下载</button>
</body>
<script src="{% static ''index/js/jquery.min.js'' %}"></script> 
<script>
    $(''#download'').bind(''click'', function() {
        location.href = ''/pdf_download'';
    })
</script>
</html>

需要引入js文件奥，如果麻烦，可以直接改成a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <a href="/pdf_download">点击我下载</a>
</body>
</html>

效果都是一样的，然后需要在views.py里在写一个控制器，来提供pdf下载

import pdfkit
from django.http import FileResponse
def pdf_download(request):
        root_path = os.path.abspath(os.path.dirname(os.path.dirname(__file__)))
        pdf_path = os.path.join(root_path, ''test.pdf'')# pdf路径可以自己修改
        options = {
            ''encoding'': "utf-8",
            # ''javascript-delay'': ''1000'',  # 添加页面延时js执行时间段 echarts
        }
        url = ''http://baidu.com'' # 简单使用百度来实验，可以换成自己需要下载的页面，自己的图表什么的
        pdfkit.from_url(url, pdf_path, options=options)
        file = open(pdf_path, ''rb'')
        response = FileResponse(file)
        response[''Content-Type''] = ''application/octet-stream''
        download_file_name = ''嘎嘎嘎.pdf'' # 如果取中文名，需要urlquote()编码转换
        response[''Content-Disposition''] = ''attachment;filename="'' + urlquote(download_file_name) + ''"''
        return response

上面代码需要注意，如果是自己制作的有echarts的界面，需要加上''javascript-delay'': ''1000''，不然图会还没绘制就被下载，点击下载效果

上面使用的都是最简单的示例，有其他需求可以自己加入，像生成的pdf会保存在本地，那么需要命令规范，可以使用时间戳来命名，当然随着时间久了pdf文件会很多，这需要代码来维持pdf的数量，定时清理。示例中pdf下载是直接返回一个一个fileresponse对象。如果是异步请求下载，那么返回需要另做处理。

排版

上述写的都是简单的界面，在实际中需要生成的pdf往往是页数很多，像这种页数很多的网页需要排版，分页的地方要是会被截断则需要做特别处理，我们可以使用css属性调整，处理最基础的设置高度外，可以利用打印属性来调整。使用一下就可以知道效果，最简单的在某一块div加上css属性，那么在生成pdf时候后面的内容会出现在下一页。

属性	简介
page	检索或指定显示对象容器时使用的页面类型
Page-break-before	检索或设置对象之前出现的页分割符
Page-break-after	检索或设置对象之后出现的页分割符
Page-break-inside	检索或设置对象容器内部出现的页分割符

心得

使用wkhtmltopdf次数已经是比较多了，无论是换了框架还是换了系统，都可以轻松的转换，使用起来十分方便，各种语言的调用十分完善，除了pdf还可以生成图片。功能真的强大。

Heroku上的字体使用wicked_pdf / wkhtmltopdf

我正在使用wicked_pdf从 HTML生成PDF并部署到Heroku.

这部分工作正常,我使用@ font-face对不同的字体进行了实验,但到目前为止,当我使用“serif”作为字体时,会产生最好的结果.

我的假设是wkhtmltopdf在Heroku服务器上使用内置字体来呈现“serif”.虽然这在PDF上看起来不错,但各种操作系统上的浏览器为“serif”呈现不同的字体 – 所以我想尝试找到HTML的匹配字体.

是否有可能找出Heroku服务器上安装的字体以及哪个字体映射到“serif”？

解决方法

您可以通过CSS显式设置所需的字体,以在不同的系统和浏览器中获得一致的字体呈现.我有两种方法可以做到这一点：

一种是指定CSS字体样式,默认后备字体为serif.例如,要从Google字体添加Droid Serif字体,并将其用作主体字体样式：

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style>
    body {
        font-family: 'Droid Serif',serif;
    }
</style>

Droid Serif将出现在所有现代浏览器中,默认为Heroku上的serif,以及具有旧/更简单Web浏览器的设备.缺点是字体在浏览器中看起来是单向的,但在PDF中是不同的,因为Heroku将使用其默认的serif字体.

第二种方法是对字体进行Base64编码(you can use this tool),并将其包含在CSS中：

@font-face {
    font-family: 'OpenSans';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}

这也可以在所有现代浏览器中使用,还可以使用Heroku为您提供一致的字体渲染.这种方法特别方便,因为您不仅可以在浏览器中获得一致性,还可以在您的开发环境和Heroku中获得一致性,因为您不必使用git-push字体并且在CSS中使用本地/绝对路径.

关于使用wkhtmltopdf从HTML生成Google Web字体和PDF和chrome html document怎么改成pdf的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于c# – 使用WKHTMLTOPDF以HTML格式显示图像,但不以PDF格式显示、C#使用wkhtmltopdf，把HTML生成PDF（包含分页）、django+wkhtmltopdf后端生成pdf、Heroku上的字体使用wicked_pdf / wkhtmltopdf的相关知识，请在本站寻找。

本文标签：