helloworld example can't render some .pdf that include chinese character
See original GitHub issueit fails to render chinese character on canvas but its okay to open the file with official pdf.js viewer
helloworld example
pdf.js viewer
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:
- Created 6 years ago
- Comments:7
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
working
How to import Cmaps in locally. Please help me.