标签: react-pdf

我正在使用该react-pdf/renderer包添加从我的网站下载 pdf 的功能。但我收到此错误消息：./node_modules/@react-pdf/font/lib/index.browser.es.js Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').

我尝试使用这个包的不同版本，例如 v2.2.0、v2.3.0 和 v3.0.0，但不幸的是，没有任何效果。我在用着react v^17.0.2。

PDF文档代码：

import { Document, Page, StyleSheet, Text, View } from "@react-pdf/renderer";
import React from "react";

const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#E4E4E4",
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

const InvoicePDF = () => {
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          <Text>Section #1</Text>
        </View>
        <View style={styles.section}> …

我在我的项目中使用React PDF 查看器。我有一个react mui 对话框组件，我使用 react draggable 来拖动它。

import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import makeStyles from "@material-ui/core/styles/makeStyles";
import DialogContent from "@material-ui/core/DialogContent";
import IconButton from "@material-ui/core/IconButton";
import ClearIcon from "@material-ui/icons/Clear";
import Draggable from "react-draggable";
import Paper from "@material-ui/core/Paper";
import Dialog from "@material-ui/core/Dialog";
import PDFViewer from "./PDFViewer";

function PaperComponent({...props}) {
  return (
    <Draggable
    >
      <Paper {...props} />
    </Draggable>
  );
}

const StyledDialog = withStyles({
  root: {
    pointerEvents: "none"
  },
  paper: {
    pointerEvents: "auto"
  },
  scrollPaper: …

我在用着@react-pdf/renderer版本“1.6.8”。但是，我无法获取以下字符：\xc4\x8d\xc4\x87\xc4\x91。相反，获得空白空间。

这些字符来自克罗地亚语，可以在其官方页面上进行测试。

https://react-pdf.org/repl?example=page-wrap

可能有人知道要设置什么或如何解决问题。在他们的官方文档中没有找到任何内容。

Github 问题：https://github.com/diegomura/react-pdf/issues/780

我正在使用方便的 React-pdf 库在我的 React 站点中渲染/显示/下载 pdf。我的 PDF 存储在服务器上。我调用了以 blob 形式发回 PDF 的服务器。现在，当用户单击链接时，我想在浏览器中以模式显示该 PDF。我在他们的网站https://react-pdf.org/上没有找到具体的例子。我不确定是否应该使用 PDFViewer，https://react-pdf.org/components#pdfviewer或 BlobProvider，https://react-pdf.org/components#blobprovider

我确信这是一项相当简单的任务，但我只是无法在任何地方找到任何好的例子。

我觉得最接近的例子来自他们的网站：

import { BlobProvider, Document, Page } from '@react-pdf/renderer';

const MyDoc = (
  <Document>
    <Page>
      // My document data
    </Page>
  </Document>
);

const App = () => (
  <div>
    <BlobProvider document={MyDoc}>
      {({ blob, url, loading, error }) => {
        // Do whatever you need with blob here
        return <div>There's something going on on the fly</div>
      }}
    </BlobProvider>
  </div>
);

@react-pdf/renderer使用官方示例模块（ https://snyk.io/advisor/npm-package/@react-pdf/renderer）：

    import ReactPDF, { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

    // Create styles
    const styles = StyleSheet.create({
        page: {
        flexDirection: 'row',
        backgroundColor: '#E4E4E4'
        },
        section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
        }
    });
    
    // Create Document Component
    const MyDocument = (): JSX.Element => (
        <Document>
            <Page size="A4" style={styles.page}>
                <View style={styles.section}>
                    <Text>Section #1</Text>
                </View>
                <View style={styles.section}>
                    <Text>Section #2</Text>
                </View>
            </Page>
        </Document>
    );

    ReactPDF.render(<MyDocument />, `example.pdf`);

但我收到一个错误：

错误：渲染是特定于 Node 的 API。您要么在浏览器中使用此方法，要么您的捆绑程序没有从适当的 Web 构建加载react-pdf。

请告诉我为什么会出现此错误以及如何修复它

我有一个按预期呈现的 pdf，除了一个问题，即当页面信息中包含很长的单词时，该单词不会将单词包装到换行符上，而是直接从容器中继续，离开页面，输出谁知道那扇门通向哪里。

这是造成此问题的容器之一的设置。样式遵循实际结构。

       const styles = StyleSheet.create({
         section: {
            paddingBottom: 20,
            position: 'relative',
         },
         sectionTitle: {
            fontSize: 12,
            fontWeight: 700,
            borderBottom: '2 solid #333333',
            display: 'block',
            marginBottom: 10,
            textTransform: 'uppercase',
            lineHeight: 1.2,
          },
        })

以下是页面部分的设置

        <View style={styles.section}>
          <StyledText style={styles.sectionTitle}>Description</StyledText>
          <StyledText style={{ width: '80%', fontWeight: 400 }}>
            {data.description}
          </StyledText>
        </View>

这里的 data.description 是以下形式的文本：“looooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnggggggggggggggggggggggggggggggggggggggggggggggggg”这样的东西。容器应该破坏这个单词，但无论我如何尝试设计它的样式，这个单词都没有响应。当碰到容器末端时如何打破单词？

到目前为止，我已经尝试过使用 wordWrap、wordBreak、flex、flexWrap、flexGrow/Shrink 和 OverflowWrap。似乎没有什么效果

我正在尝试在我的 reactjs Web 应用程序中使用 react-pdf 将一个 pdf 页面制作为一个 base64 图像。

我已经尝试了我所知道的将图像制作为 A4 大小的图像并完全填充图像的所有方法，以便一个图像在 react-pdf 中作为整个页面出现

我试过宽度：100%，高度：100%，对象填充，试图增加尺寸。但到目前为止我没有成功。现在图像位于中心，并没有到达页面的所有角落。

import React, { Component } from 'react'
import ReactPDF,  { Page, Text, View, Document, StyleSheet ,  Font, Image,} from '@react-pdf/renderer';
import pic from "../pics/pic.jpeg"



// Create styles
const styles = StyleSheet.create({
    page: {
      flexDirection: 'row',
      backgroundColor: '#fff',
      width:"100%",
      orientation:"portrait"
    }, 
    image: {
        width: '100%',
        height:"100%",
        padding: 10,
        backgroundColor: 'white',
      },
  });


// Create Document Component
export default class ImageToPDF extends Component {

    render() { …

我正在尝试使用 react-pdf 打开 pdf 文档

const PDFDocument = () => {

  const [PDFData, setPDFData] = useState(() => {
    const data = localStorage.getItem('pdfData')
    return JSON.parse(data)
  })

  useEffect(() => {
    console.log(PDFData)
  }, [PDFData])

  const { NameOfService, AccessibilityDetails, AddressLine1, AddressLine2, AddressLine3, Postcode, OtherDetailedInformation, MondayStart, MondayEnd, TuesdayStart, TuesdayEnd, WednesdayStart, WednesdayEnd, ThursdayStart, ThursdayEnd, FridayStart, FridayEnd, SaturdayStart, SaturdayEnd, SundayStart, SundayEnd, Cost,  Buses, TubeAndTrains, CarParkingDetails, Name1, PhoneNumber1, Email1, Name2, PhoneNumber2, Email2, Website, OtherContactInfo  } = PDFData

  return (
    <PDFViewer>
      <Document>
        <Page size="A4" style={styles.page}>
          <View style={styles.heading}>
            <Text>{NameOfService}</Text>
          </View> …

谁能告诉我如何@react-pdf/pdfkit在react.js中添加自定义字体？

我尝试使用doc.registerFont(path, font_family) 但它显示一个错误，例如Unhandled Rejection (Error): fontkit.openSync unavailable for browser build

谁能帮我？我不想渲染pdf。相反，我尝试创建并下载它。所以我不能使用react-pdf/renderer. 这就是我使用react-pdf/pdfkit的原因

我用来react-pdf通过 CRA 在 React 中渲染 PDF，然后像这样导入它：

import { Document, Page } from "react-pdf/dist/esm/entry.webpack";

现在，我尝试使用以下 webpack 配置来实现 SSR：

// webpack.server.conf

const path = require("path");
const webpackNodeExternals = require("webpack-node-externals");

module.exports = {
  target: "node",
  entry: "./server/index.tsx",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build-server"),
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    modules: [path.resolve(__dirname, "src"), "node_modules"],
  },
  externals: [webpackNodeExternals()], // excludes node modules in Webpack
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        options: {
          configFile: "tsconfig.server.json",
        },
      },
      // we …