小编Har*_*rry的帖子

如何在react-pdf中用一张图像填充整个页面?

我正在尝试在我的 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() { …
Run Code Online (Sandbox Code Playgroud)

html css reactjs react-pdf

8
推荐指数
1
解决办法
1万
查看次数

如何在 Firebase 托管中保护第三方 API 密钥?

我在 reactjs-firestore 项目中使用了不同的第三方 API 密钥。但是我找不到在 firebase 托管中保护它们的方法。如何在 Firebase 托管中隐藏这些 API 密钥?

例如,在 Netlify 托管服务中,它们提供了可用于保护 API 密钥的环境变量功能。

也就是说,我可以将 API 密钥存储在 netlify 的变量中,并且将从那里检索它,这将是安全的。

但是在firebase中我该怎么做?

我似乎找不到类似的设置,我可以在其中将密钥存储为托管服务中的环境变量。

如果没有这样的功能,是否有另一种方法来保护这些 API 密钥?

对于 firebase API 密钥,我已经阅读了一些答案并了解到 firebase API 密钥不会被隐藏。

是否至少有某种方法可以将这些 firebase API 密钥至少保护到一个安全的 URL?(我知道编写安全规则是最好的方法,但我也在尝试寻找其他选项)。

我似乎找不到一种方法来保护 Firebase 项目 API 密钥使用到一个安全的 URL。

我试图找到保护 API 密钥的方法,但没有成功。

下面是我如何在 reactjs 代码中检索数据


axios.post(`https://data.retrieval.com/1/data?key=API_KEY`,  data)

Run Code Online (Sandbox Code Playgroud)

我试图在生产代码中隐藏 API_KEY

我想保护托管网站中的第三方 API 密钥。并将我的 firebase 项目 API 密钥限制为仅一个安全 URL。我现在无法做到这一点。任何建议或解决方案?

感谢您尝试提供帮助。谢谢你的时间

firebase reactjs firebase-hosting google-cloud-firestore

6
推荐指数
2
解决办法
1594
查看次数

如何使 react-select 下拉列表中的选项可访问?

我正在构建一个reactjs应用程序,我正在使用一个名为react-select的库作为可搜索的下拉列表。但我面临的问题是,使用箭头键时,NVDA 屏幕阅读没有读出select 中的选项。并且无法设置焦点由于某种原因放在此下拉列表上。

我通过官方文档进行了尝试,但到目前为止还没有运气。

我正在使用的库: React-select

https://react-select.com/home

编码:


import React, { Component, Fragment } from "react";
import Select from "react-select";

export const flavourOptions = [
  { value: "vanilla", label: "Vanilla", rating: "safe" },
  { value: "chocolate", label: "Chocolate", rating: "good" },
  { value: "strawberry", label: "Strawberry", rating: "wild" },
  { value: "salted-caramel", label: "Salted Caramel", rating: "crazy" }
];

export default class SampleDropdown extends Component {
  state = { …
Run Code Online (Sandbox Code Playgroud)

accessibility reactjs react-select

5
推荐指数
1
解决办法
5464
查看次数