个人中心
gpt4 book ai didi

node.js - React Nodejs - jsx 中的自定义 @font-face 用于 PDF 生成

转载 作者：太空宇宙 更新时间：2023-11-03 23:22:27 24 4
gpt4 key购买 nike

我有一个 React 项目，其中部分功能涉及向运行 PhantomJS 和 html-pdf 插件的 Nodejs 服务器发送请求，以便创建一个通过我的 Node 服务器的 React 组件构建的 pdf。我遇到的问题实际上是将自定义字体嵌入到我的 react 组件中。我有一个 base64 编码的字体集，与一堆文件相比，它更容易包含，但由于 React 在 CSS 中加载的方式，我不断收到错误。

下面是在我的 NodeJS 服务器上生成 PDF 的函数:

exports.order = (req, res, next) => {

  phantom.create().then(function(ph) {
    ph.createPage().then(function(page) {
      // page.viewportSize = { width: 600, height: 600 };
      page.open(`http://localhost:3005/print/work/${req.params.id}`).then(function(status) {
        page.property('content').then(function(content) {
          pdf.create(content, options).toBuffer(function(err, buffer){

              res.writeHead(200, {
               'Content-Type': 'application/pdf',
               'Content-Disposition': `attachment; filename=order-${req.params.id}.pdf`,
               'Content-Length': buffer.length
             });
             res.end(buffer);
          });
          page.close();
          ph.exit();
        });
      });
    });
  });

}

这是包含 PDF HTML 的实际 React 组件:

var React = require('react');
var moment = require('moment');

class PrintWorkOrder extends React.Component {
  render() {
    var order = this.props;

    var s = {
      body: {
        width: '100%',
        float: 'none',
        fontFamily: 'Helvetica',
        color: '#000',
        display: 'block',
        fontSize: 10,
      }
    }
    return (
      <div style={s.body}>
         I shortened the content in her for brevity
      </div>
    )
  }
}

module.exports = PrintWorkOrder;

该功能目前有效，只是现在我需要添加一些非 Helvetica 的自定义字体，而我在当前的实现中无法解决该问题。有人对此有任何见解吗？

最佳答案

我也有同样的问题，我所做的是将 front 编码为 base64 并将其设置为

字体.css

@font-face {
  font-family: 'fontName';
  src: url(data:application/x-font-woff;charset=utf-8;base64,<base64>) format('woff'),
  font-weight: normal;
  font-style: normal;
}

技巧是读取CSS文件内容并将其作为样式标签注入(inject)到DOM标记中

React.createElement('style', { dangerouslySetInnerHTML: { __html: this.props.children } });

所以要做到这一点:对于第二行代码，它的作用是创建样式元素。您可以编写一个组件，从 .css 文件中读取内容，然后将内容放入样式元素中，如下所示:

Style.js

var React = require('react');
export default class Style extends React.Component {
    static propTypes = {
        children: React.PropTypes.string.isRequired
    };

    render() {
        return React.createElement('style', { dangerouslySetInnerHTML: { __html: this.props.children } });
    }
}

修改PrintWorkOrder.js

var React = require('react');
var moment = require('moment');
var fs = require('fs');
var path = require('path');
var Style = require('./Style');

const readFile = (filePath) => fs.readFileSync(path.resolve(__dirname, filePath)).toString();

class PrintWorkOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            styles: []
        }
    }

    componentWillMount() {
        this.setState({
            styles: [
                readFile('font.css') // Assuming putting font.css same location with PrintWorkOrder component
            ]
        })
    }

    render() {
        var order = this.props;

        var s = {
            body: {
                width: '100%',
                float: 'none',
                fontFamily: 'Helvetica',
                color: '#000',
                display: 'block',
                fontSize: 10,
            }
        }

        return (
            <html>
                <head>
                    {/* Here to render all the styles */}
                    {this.state.styles.map(s => (<Style>{s}</Style>))}
                </head>
                <body>
                    <div style={s.body}>
                        I shortened the content in her for brevity
                    </div>
                </body>
            </html>
        );
    }
}

module.exports = PrintWorkOrder;

关于node.js - React Nodejs - jsx 中的自定义 @font-face 用于 PDF 生成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48257350/

24 4 0
文章推荐： node.js - Mongoose 模型中自动递增数字字段
文章推荐： jquery - 鼠标悬停时添加类
文章推荐： css - Stylus - 在循环中创建函数？
文章推荐： node.js - 如何为nodeJS中的不同测试用例覆盖环境变量？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com