在react中使用PDF，复制之后乱码的问题

feigesz

于 2023-08-03 11:16:18 发布

阅读量395

点赞数

CC 4.0 BY-SA版权

文章标签： pdf

本文链接：https://blog.youkuaiyun.com/feigesz/article/details/132078054

本文介绍了如何在React应用中使用react-pdf和react-copy-to-clipboard库提取PDF内容，解决因编码不一致导致的乱码问题，通过iconv-lite库进行文本编码转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.可以使用react-pdf和react-copy-to-clipboard库来实现

2.如果复制出来的内容乱码，可能是因为PDF中的文字编码方式和你所在的环境不一致，可以尝试使用文本编码库来处理，比如使用iconv-lite库

import React, { useState } from 'react';
import { Document, Page, Text } from 'react-pdf';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import iconv from 'iconv-lite';

function App() {
  const [selectedText, setSelectedText] = useState('');

  const handleSelection = () => {
    const selection = window.getSelection().toString();
    setSelectedText(iconv.encode(selection, 'utf-8').toString());
  };

  return (
    <div>
      <Document file="sample.pdf" onMouseUp={handleSelection}>
        {Array.from({ length: numPages }, (_, i) => (
          <Page key={`page_${i + 1}`} pageNumber={i + 1}>
             <Text>Hello, World!</Text>
          </Page>
        ))}
      </Document>
      {selectedText && (
        <CopyToClipboard text={selectedText}>
          <button>Copy</button>
        </CopyToClipboard>
      )}
    </div>
  );
}

export default App;