整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

24-跨平台导PDF，结合wkhtmltopdf很顺手

言

好东西要分享，之前一直在使用wkhtmltopdf进行pdf文件的生成，常用的方式就是先安装wkhtmltopdf，然后在程序中用命令的方式将对应的html生成pdf文件，简单而且方便；但重复的编码使得想在wkhtmltopdf基础上进行封装，偶然间发现有小伙伴已经封装的还不错啦，常用的功能都已经实现，源码地址：https://github.com/fpanaccia/Wkhtmltopdf.NetCore。

作者将其打包成Nuget包(Wkhtmltopdf.NetCore)，直接引入使用即可；

正文

既然用到了.NetCore，肯定就要考虑到跨平台兼容性，对于wkhtmltopdf之前一直是在Windows上使用，还没有在其他平台尝试；这个包封装的行不行，拉出来遛遛就知道啦，接下来就试试：

1. 建个API项目，引入包和兼容对应平台的wkhtmltopdf执行文件；



注： 默认依赖的wkhtmltopdf执行文件需要存放在Rotativa目录下，可以自定义名称，如果自定义，需要再注册服务时指定对应的文件名；这里的wkhtmltopdf已经根据不同平台进行编译打包了，无需安装，这些文件在源码那就有；

2.创建PDFTestController控制器，添加如下接口进行测试；

首先把生成pdf的服务注入进来，后续直接使用就可以啦：



接下来就开始写接口啦，这里只是测试，代码冗余没有考虑，在实际项目中小伙伴可以根据自己需求进行封装；

  • ExportPDFByHtml 接口，用html直接生成pdf文件，但这里没有保存，以文件流的形式访问，通过浏览器查看文件，可以自行下载；html模板在实际开发过程中可以单独用文件存储；



  • SavePDFByHtml接口，直接保存文件，文件名可以根据需要进行自定义；



  • TestMarginAndPageSize接口，设置Margin和PageSize参数，其他参数也可以设置；



ConvertOptions默认封装了以下属性，小伙伴也可以自定义扩展，只要继承IConvertOptions即可，这里就不演示的，因为官方有对应的案例，下伙伴下去搞搞，wkhtmltopdf的参数挺多的，都可以进行封装使用。



  • ExportByRazorView使用Razor视图的方式进行pdf文件生成，此库已经支持cshtml文件的读取



根据指定视图生成对应的pdf效果，如下：



  • ExportByRazorViewData数据动态绑定，既然支持视图，那就应该支持Razor语法，一般常用的就是数据绑定了，上面是静态的，接下来来个动态绑定的。



根据指定视图生成对应的pdf效果，如下：



如上基本的使用演示就说那么多，使用还是很简单，小伙伴后续可以根据自己的需要进行相关扩展；当然还有其他功能，比如设置页眉/页脚等，作者提供有对应的案例；这里不说那么多，不然又是长文。

3. 小伙伴用的时候可能会遇到的问题

  • 在开发调试运行项目时，会报找不到wkhtmltopdf文件，那是因为运行时的确找不到对应的文件，将对应Rotativa下的文件设置为始终复制即可：



  • 在Windows下怎么玩都没问题啦，开始发布到Linux(我用的centos 7)，我擦，莫名其妙的错。



看见这个错我懵的，一顿搜索猛如虎，还是没找到答案；冷静下来，重新捋捋，原来是自己在犯傻；

两个问题需要解决，1.上传到Linux下的wkhtmltopdf没有给执行权限；2.可能环境缺少对应的依赖库；

设置可执行权限

在Linux环境下，可以通过ll命令查看权限，刚开始是没有权限的，只需要执行chmod 777 wkhtmltopdf命令，执行权限就有了，如下图中红框中的x就是可执行权限；关于Linux常用命令后续单独整理一篇分享吧，这里先不延伸。



安装缺少的依赖库

可执行权限开启之后，别急着去访问页面，这样可能还是错误。因为可能缺少依赖库，那咋知道缺少呢，我是直接执行wkhtmltopdf，执行成功就没啥，不成功就会报缺少相关依赖，然后直接安装就行啦；执行./wkhtmltopdf https://www.baidu.com ./test.pdf试试就知道啦，因为wkhtmltopdf本身是可以单独运行的，并不依赖我们写的程序。

  • 当执行成功之后，然后开始访问接口导出功能，如果不出意外，遇到中文就产生乱码啦，那是因为Linux环境下缺少相关的字体文件，将对应的字体文件拷贝到Linux上即可，字体我找好了，下载地址如下：

链接: https://pan.baidu.com/s/1jikC0DUkpEzpXL5ysjEQPA 提取码: tn4j ；

将下载下来的字体解压，然后拷贝到Linux下的 /usr/share/fonts目录下即可

最后这样应该就没啥问题啦，剩下的就交给小伙伴自己摸索搞实践吧；

此文源码地址：https://github.com/zyq025/DotNetCoreStudyDemo

wkhtmltopdf官网地址：https://wkhtmltopdf.org/

总结

使用还是很简单的，常规的需求没啥问题，如果需要功能定制化，小伙伴可以参考源码，自己封装一个(封装思路不难的)； 如果小伙伴有比较好的导出库，免费开源的那种，一起分享出来玩玩。

感谢小伙伴的：点赞、收藏和评论，下期继续~~~

一个被程序搞丑的帅小伙，关注"Code综艺圈"，跟我一起学~~~

用 Go 模板生成 HTML 页面的示例

在这里，我提供了另一个我为了跟进我之前关于“如何在 Golang 中使用模板”的文章而制作的例子。我将使用该文章中关于使用 Golang（Go 语言）模板的一些基本技巧。此外，对于这个项目，我还决定使用嵌套模板和在模板中编写我自己的简单函数。

网页是响应式的，所以它可以适应不同的屏幕宽度，当你点击其中一个“产品”时，你会得到一个弹出窗口，里面有描述和一些按钮。

在原始示例中，产品和它们的描述都在 HTML 文件中硬编码。使用模板并用（不同的）数据渲染它们可以避免硬编码产品及其描述。

接下来，我将首先向你展示实际的程序，它将解析和渲染模板，然后输出生成的 HTML 文件。之后，我将向你展示不同模板的样子，并讨论我在它们中使用的一些技巧。

实际的 Golang 程序

这是会完成所有工作的 Golang 程序：

package main

import (
    "bufio"
    "bytes"
    "html/template"
    "os"
)

type product struct {
    Img         string
    Name        string
    Price       string
    Stars       float64
    Reviews     int
    Description string
}

func subtr(a, b float64) float64 {
    return a - b
}

func list(e ...float64) []float64 {
    return e
}

func main() {

    data := []product{
        {"images/1.png", "strawberries", "$2.00", 4.0, 251, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
        {"images/2.png", "onions", "$2.80", 5.0, 123, "Morbi sit amet erat vitae purus consequat vehicula nec sit amet purus."},
        {"images/3.png", "tomatoes", "$3.10", 4.5, 235, "Curabitur tristique odio et nibh auctor, ut sollicitudin justo condimentum."},
        {"images/4.png", "courgette", "$1.20", 4.0, 251, "Phasellus at leo a purus consequat ornare ac aliquam quam."},
        {"images/5.png", "broccoli", "$3.80", 3.5, 123, "Maecenas sed ante sagittis, dapibus dui quis, hendrerit orci."},
        {"images/6.png", "potatoes", "$3.00", 2.5, 235, "Vivamus malesuada est et tellus porta, vel consectetur orci dapibus."},
    }

    allFiles := []string{"content.tmpl", "footer.tmpl", "header.tmpl", "page.tmpl"}

    var allPaths []string
    for _, tmpl := range allFiles {
        allPaths = append(allPaths, "./templates/"+tmpl)
    }

    templates := template.Must(template.New("").Funcs(template.FuncMap{"subtr": subtr, "list": list}).ParseFiles(allPaths...))

    var processed bytes.Buffer
    templates.ExecuteTemplate(&processed, "page", data)

    outputPath := "./static/index.html"
    f, _ := os.Create(outputPath)
    w := bufio.NewWriter(f)
    w.WriteString(string(processed.Bytes()))
    w.Flush()
}

在第3-8行，我们导入了必要的包。包bufio、bytes和os用于输出 HTML 文件。包html/template用于处理模板。

在第10-17行，我们定义了product，这是一个用于存放产品数据的struct。确保所有的属性都是大写的，也就是说，它们都是可导出的。在 Golang 模板中使用 struct 时，这是必需的。

另外，请注意星级评分是一个在0到5之间的浮点数。我们将这个数字的类型定义为float64，是因为模板中所有的浮点数都使用float64。

在第19-25行，我创建了两个函数，因为我对sprig包提供的函数并不满意。第一个函数叫做subtr()，是一个简单的浮点数减法函数，第二个函数叫做list()，用于创建一个浮点数列表。

在第29-36行，我们定义了要在模板中渲染的数据。在这个例子中，数据是硬编码的。在更现实的环境中，这些数据可能会存储在某种类型的数据库中。注意，数据遵循了product结构的定义。

在第38行，我们将所有模板的文件名添加到一个切片中。

在第40-43行，将目录名/templates/添加到所有文件名中。

在第45行，我们使用ParseFiles()解析模板，确保使用template.FuncMap{}添加了两个函数subtr和list，并使用template.Must()检查模板的正确性。

在第47-48行，我们将渲染的模板输出到一个字节缓冲区。为了确保渲染器以page模板开始，我们使用ExecuteTemplates()并将"page"作为参数。在这里，我们也将我们定义的数据提供给渲染器。

在第50-54行，渲染的字节缓冲区输出到./static目录中名为index.html的 HTML 文件。

生成 HTML 的模板

在这里我将讨论本项目使用的所有模板。

“page”模板

这是定义完整网页的模板。它调用了其他三个模板：header，content和footer。

{{define "page"}}
{{template "header" -}}
{{template "content" . -}}
{{template "footer" -}}
{{end}}

在第1行，必须在此模板内定义page，否则ExecuteTemplates()将找不到它。

在第3行，注意，在调用content模板时添加了一个点。这向模板渲染器发出信号，表示提供的数据要发送到content模板。这与向函数提供参数一样。鉴于header和footer模板不需要数据，因此也无需添加点。

“header”模板

这个模板用于渲染一个典型的HTML头部，加载字体、样式和JavaScript代码。

{{define "header" -}}
<!DOCTYPE html>
<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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   <link rel="stylesheet" href="css/style.css">
   <script src="js/script.js" defer></script>
</head>
<body>
{{end}}

注意，我们使用define和end关键字来定义这个模板为header模板。

另外，注意双结束括号前的‘-’符号。这个符号告诉渲染器移除空白和换行符。根据我的经验，你需要尝试这些‘-’的放置位置。

为了达到期望的输出，你有时需要将‘-’放在开始的双括号之后，有时需要放在结束的双括号之前，有时两个地方都需要放。

“content”模板

这是渲染HTML文件主体的模板。

将内容与头部和尾部分开定义的一个原因是，我们可以快速创建其他页面，这些页面具有不同的内容，但头部和尾部是相同的——也就是说，加载相同的CSS，JS，字体等。

如前所述，我创建了自己的Sprig的list和subf函数版本，因为我对该包中的函数不满意。这是因为我遇到了一些无法解决的错误。我还决定将我的减法函数命名为subtr而不是subf。

{{define "content" -}}
<div class="container">
   <h3 class="title"> organic products </h3>
   <div class="products-container">
{{range $index, $item :=.}}
      <div class="product" data-name="p-{{$index}}">
         <img src="{{$item.Img}}" alt="">
         <h3>{{$item.Name}}</h3>
         <div class="price">{{$item.Price}}</div>
      </div>
{{end}}
   </div>
</div>

<div class="products-preview">
{{range $index, $item:=.}}
  <div class="preview" data-target="p-{{$index}}">
      <i class="fas fa-times"></i>
      <img src="{{$item.Img}}" alt="">
      <h3>organic {{$item.Name}}</h3>
      <div class="stars">
      {{- $stars := list 1.0 2.0 3.0 4.0 5.0 -}}
      {{- range $stars}}
            {{$x:= subtr . 0.5}}
            {{- if lt $item.Stars $x -}}
            <i class="far fa-star"></i>
            {{- else if lt $item.Stars . -}}
            <i class="fas fa-star-half-alt"></i>
            {{- else -}}
            <i class="fas fa-star"></i>
            {{- end -}}
      {{end}}
         <span>( {{$item.Reviews}} )</span>
      </div>
      <p>{{$item.Description}}</p>
      <div class="price">{{$item.Price}}</div>
      <div class="buttons">
         <a href="#" class="buy">buy now</a>
         <a href="#" class="cart">add to cart</a>
      </div>
   </div>
{{end}}
</div>
{{end}}

在第5到12行，我们遍历数据中的所有产品。对于每个产品，我们创建内部模板变量$index和$item。我们使用$index作为data-name属性。从$item中我们提取Img，Name，和Price属性用于HTML。

在第16到42行，我们做的和上面一样，但我们也从$item中提取$Stars $Description和$Reviews属性。

此外，在第22行，我们创建了一个名为$stars的列表。这个列表包含从1.0到5.0的浮点数。我们需要这些数来显示星星。这些数表示显示每个星星的阈值。

然后，在第23到32行，我们创建一个循环来显示星星。基本上，我们有三种类型的星星可以显示：满星，半星，和空星。

使用条件语句，我们确定一个项目的星星数（$item.Stars）是否小于$stars列表中的星星数减去0.5，或小于星星数，或更高。在第一种情况下，我们显示一个空星。在第二种情况下，我们显示一个半星。最后，在最后一种情况下，我们显示一个满星。

“footer”模板

除了将模板定义为footer之外，这里没有特别的事情。

{{define "footer" -}}
</body>
</html>
{{end}}

运行HTML生成器并查看结果

确保main.go文件位于一个也包含两个名为templates和static的子目录的目录中。上述模板都需要在templates目录中。原始代码中的CSS，JS和图片需要在static目录中的各自子目录中。

只需在终端的正确目录中键入go run main.go来运行生成器。随后，HTML文件将被生成并写入static目录作为index.html。

现在，你可以在浏览器中打开index.html文件，你应该得到页面展示的结果。

列表清单

请记住，始终保持学习的态度，并享受编码的乐趣！祝您编码愉快！

如果你喜欢我的文章，点赞，关注，转发！

家好，我是DD，已经是封闭在家的第51天了！

最近一直在更新Java新特性（https://www.didispace.com/java-features/）和IDEA Tips（https://www.didispace.com/idea-tips/）两个原创专栏，其他方向内容的动态关注少了。昨天天晚上刷推的时候，瞄到了这个神奇的东西，觉得挺cool的，拿出来分享下：

相信你看到图，不用我说，你也猜到是啥了吧？html里可以跑python代码了！

看到好多Python公众号已经开始猛吹未来了，但乍看怎么觉得有点像JSP？或者一些模版引擎？是进步还是倒退呢？与其瞎想，不如仔细看看这个东东的能力吧！

根据官方介绍，这个名为PyScript的框架，其核心目标是为开发者提供在标准HTML中嵌入Python代码的能力，使用 Python调用JavaScript函数库，并以此实现利用Python创建Web应用的功能。

看到介绍里提到了调用JavaScript函数库的能力，看来跟JSP或者模版引擎还是有区别的。

PyScript 快速体验

官方给了一个例子，可以帮助我们观的感受这个开发框架的能力，不妨跟着DD看看，它能做啥吧！

第一个案例，hello world

代码很简单，就下面这几行。你只需要创建一个html文件，然后复制进去就可以了。

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body> 
    <py-script> 
        print('Hello, World!') 
    </py-script> 
  </body>
</html>

保存好之后，在浏览器里打开就能看到这样的页面了：

回头再看看这个html里的内容，三个核心内容：

  • 引入pyscript的样式文件：<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
  • 引入pyscript的脚本文件：<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  • <py-script>标签中写具体的python代码来输出Hello World

如果你懒得自己敲代码的话，本文的两个案例代码我打包放在公众号了，需要的朋友可以关注公众号“程序猿DD”，回复：pyscript 获取。

第二个案例，数据定义 + 数据展示

先创建一个data.py文件，然后加入前面的代码。功能很简单，就是随机生成（x，y）的坐标

import numpy as np

def make_x_and_y(n):
    x = np.random.randn(n)
    y = np.random.randn(n)
    return x, y

再创建一个html文件，加入下面的代码

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
        - paths:
          - /data.py
      </py-env>
    </head>

  <body>
    <h1>Let's plot random numbers</h1>
    <div id="plot"></div>
    <py-script output="plot">
    import matplotlib.pyplot as plt
    from data import make_x_and_y

    x, y = make_x_and_y(n=1000)

    fig, ax = plt.subplots()
    ax.scatter(x, y)
    fig
    </py-script>
  </body>
</html>

这里就稍微复杂一些了，除了hello world中的几个要点外，这里还有这几个要关注的地方：

  • <py-env>标签：这里声明要引入的包和要引入的文件（上面创建的data.py）
  • <py-script output="plot">：这里定义了要在<div id="plot"></div>中输出的内容，可以看到这里的逻辑都是用python写的

这个页面的执行效果是这样的：

是不是很神奇呢？整个过程中都没有大家熟悉的cs、js内容，就完成了这样一个图的页面实现。

小结

最后，谈谈在整个尝试过程中，给我的几个感受：

  1. 开发体验上高度统一，对于python开发者来说，开发Web应用的门槛可以更低了
  2. 感觉性能上似乎有所不足，几个复杂的案例执行有点慢，开始以为是部分国外cdn的缘故，后来移到本地后，还是慢。这部分可能还需要进一步优化。

这个开发框架目前还只是alpha版本，未来一定还会有更多特性与优化出来，总体上我觉得这个框架还是非常cool的，尤其对于刚学会Python，或者只会Python，但又想快速开发Web应用的小伙伴来说，可能将会是个不错的选择，那你觉得这个框架如何？未来会不会火？留言区聊聊吧！


在线咨询
上一篇：如何使用JavaScript获取百分比宽度元素的像素宽度
下一篇：HTML从入门到精通-基础篇

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 石家庄看香高人 常宁市 西市区 康平县 越西县 剑阁县 崇州市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com   www.hmttv.cn
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服