question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

helloworld example can't render some .pdf that include chinese character

See original GitHub issue

it fails to render chinese character on canvas but its okay to open the file with official pdf.js viewer

helloworld example

image

pdf.js viewer

image

import React, { Component } from 'react'
import { AutoSizer, List } from 'react-virtualized'

class Page extends Component {
  componentDidMount() {
    this.renderPDF()
  }

  renderPDF = async () => {
    const { pdf, pageNumber, pageWidth, pageHeight, scale, } = this.props
    const page = await pdf.getPage(pageNumber)
    const viewport = page.getViewport(scale)
    const canvas = this.refs.page
    const context = canvas.getContext('2d')
    canvas.height = viewport.height
    canvas.width = viewport.width
    page.render({
      canvasContext: context,
      viewport: viewport,
    })
  }

  render() {
    const { index, style, } = this.props
    return (
      <div className='watermark-layer' key={index} style={style}>
        <canvas ref='page'></canvas>
      </div>
    )
  }
}

export default class PDFViewer extends Component {
  state = {
    pdf: null,
    numPages: 0,
    pageWidth: 0,
    pageHeight: 0,
    scale: 0,
  }

  style = {
    minHeight: '100vh',
  }

  async componentDidMount() {
    const { file } = this.props
    const pdf = await PDFJS.getDocument(file)
    const { numPages } = pdf
    const { pageWidth, pageHeight, scale } = await this.getSize(pdf)
    this.setState({ pdf, numPages, pageWidth, pageHeight, scale, })
  }

  getSize = async (pdf, full) => {
    const page = await pdf.getPage(1)
    const { width, height } = page.getViewport(1)
    const { pdfdiv } = this.refs
    let pageWidth, pageHeight, scale

    if (full) {
      pageWidth = pdfdiv.clientWidth
      pageHeight = pageWidth * height /  width
      scale = pageWidth / width
    } else {
      pageHeight = pdfdiv.clientHeight
      pageWidth = pageHeight * width / height
      scale = pageWidth / width
    }

    return {
      pageWidth,
      pageHeight,
      scale,
    }
  }

  render() {
    const { pdf, numPages, pageWidth, pageHeight, scale, } = this.state
    return (
      <div ref='pdfdiv' style={this.style}>
        <List
          style={{ margin: '0 auto' }}
          width={pageWidth}
          height={pageHeight}
          rowHeight={pageHeight}
          rowCount={numPages}
          rowRenderer={({ index, style, }) => {
            return (
              <Page
                key={index}
                index={index}
                style={style}
                pdf={pdf}
                pageNumber={index + 1}
                pageWidth={pageWidth}
                pageHeight={pageHeight}
                scale={scale}
              />
            )
          }}
        />
      </div>
    )
  }
}

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7

github_iconTop GitHub Comments

4reactions
crapthingscommented, Jan 23, 2018

working

<script src='https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/build/pdf.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/build/pdf.worker.min.js'></script>
PDFJS.cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/' // include "/"
PDFJS.cMapPacked = true // set cMapPacked = true to ignore Warning: Ignoring invalid character "121" in hex string
0reactions
vantuanprimelabocommented, Dec 14, 2021

cMapUrl

How to import Cmaps in locally. Please help me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Rendering as PDF not rendering Chinese Characters
When I render a vf page normally with Chinese characters on it, everything works fine. If I attempt to render it as a...
Read more >
Solved: Chinese Characters Displaying Invalid Character Ad...
I have found the answer I needed. It seems that font I needed "Arial Unicode MS" was missing from the client that opened...
Read more >
Solved: Render tool - unable to display Chinese characters...
Hi,. I am trying to produce a report in Chinese using the render tool. The PDF output was unable to display Chinese characters...
Read more >
PDFBox does not correctly render Simsun (chinese) font
Try to embed the SimSun font inside the PDF with the PDResource.add(font) method. The result is the same as the first method. Embed...
Read more >
PDF cannot render strings in some languages (Chinese ...
While creating PDF document with Japanese/Chinese characters, kindly use the font file which supports that languages. We have tried this in our ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found