pdfjs 引入字体失败

Question

这个pdf是宋体 使用的pdfjs-dist 2.0.943

<div
  ref="container"
  class="page-container"
  :style="{
    height: `${pageHeight}px`
  }"
>
  <canvas />
</div>

<script>
import pdfJS from 'pdfjs-dist'
import data from './kkk.json'
const cMapUrl = '../../../node_modules/pdfjs-dist/cmaps/'
export default {
props: {

url: {
  type: String,
  required: true
},
pageNo: {
  type: Number,
  required: true
}

},
data () {

return {
  doc: null,
  pageHeight: 0,
  renderList: [],
  notice: ''
}

},
watch: {

url: {
  immediate: true,
  handler (value) {
    this.getPDFFile()
  }
}

},
methods: {

getPDFFile () {
  if (!this.url) return
  pdfJS.getDocument({
    url: data.data,
    cMapUrl: cMapUrl,
    cMapPacked: true
    // CMapReaderFactory: {}
    // disableFontFace: true
  }).then(pdf => {
    this.doc = pdf
    this.$nextTick(() => {
      this.renderPage(this.pageNo)
    })
  })
},
// 渲染page
renderPage (pageNo) {
  this.doc.getPage(pageNo).then(page => {
    const container = this.$refs.container
    if (!container) return
    const canvas = container.querySelector('canvas')
    if (!canvas) return
    const ctx = canvas.getContext('2d')
    const dpr = window.devicePixelRatio || 1
    const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
    const ratio = dpr / bsr
    const rect = container.getBoundingClientRect()
    const viewport = page.getViewport(1)
    const width = rect.width
    const height = width / viewport.width * viewport.height
    canvas.style.width = `${width}px`
    canvas.style.height = `${height}px`
    this.pageHeight = height
    canvas.height = height * ratio
    canvas.width = width * ratio
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
    page.render({
      canvasContext: ctx,
      viewport: page.getViewport(width / viewport.width)
    })
  })
}

}
}
</script>

<style scoped>
.notice {
position: fixed;
background: #000;
color: #fff;
left: 2rem;
top: 5rem;
right: 2rem;
}
</style>
这种引入字体 会直接不显示

如果使用url字体的话
就只显示方框

Answer 1

this.$nextTick(() => {
      this.renderPage(this.pageNo)
    })

renderPage 这加个setTimeout 试试

Answer 2

请问有解决吗