jspdf导出图片pdf失败

JavaScript08

jspdf导出图片pdf失败,第1张

很多原因的，可能是js 中同源策略所引起的跨域请求图片,所导致的jsPdf读取页面中图片失败的问题 ，还有图片或pdf格式下载的选项,因此可以以某种方式使用jspdf还是以某种方式使用jspdf图片又失败，等等原因的，希望可以帮到你。

<html>

<body>

<div>

<button id="prev" onclick="goPrevious()">Previous</button>

<button id="next" onclick="goNext()">Next</button>

<span>Page: <span id="page_num"></span>/ <span id="page_count"></span></span>

</div>

<div>

<canvas id="the-canvas" style="border:1px solid black"></canvas>

</div>

<!-- Use latest PDF.js build from Github -->

<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>

<script type="text/javascript">

//

// NOTE:

// Modifying the URL below to another server will likely *NOT* work. Because of browser

// security restrictions, we have to use a file server with special headers

// (CORS) - most servers don't support cross-origin browser requests.

//

var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'

//

// Disable workers to avoid yet another cross-origin issue (workers need the URL of

// the script to be loaded, and currently do not allow cross-origin scripts)

//

PDFJS.disableWorker = true

var pdfDoc = null,

pageNum = 1,

scale = 0.8,

canvas = document.getElementById('the-canvas'),

ctx = canvas.getContext('2d')

//

// Get page info from document, resize canvas accordingly, and render page

//

function renderPage(num) {

// Using promise to fetch the page

pdfDoc.getPage(num).then(function(page) {

var viewport = page.getViewport(scale)

canvas.height = viewport.height

canvas.width = viewport.width

// Render PDF page into canvas context

var renderContext = {

canvasContext: ctx,

viewport: viewport

}

page.render(renderContext)

})

// Update page counters

document.getElementById('page_num').textContent = pageNum

document.getElementById('page_count').textContent = pdfDoc.numPages

}

//

// Go to previous page

//

function goPrevious() {

if (pageNum <= 1)

return

pageNum--

renderPage(pageNum)

}

//

// Go to next page

//

function goNext() {

if (pageNum >= pdfDoc.numPages)

return

pageNum++

renderPage(pageNum)

}

//

// Asynchronously download PDF as an ArrayBuffer

//

PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {

pdfDoc = _pdfDoc

renderPage(pageNum)

})

</script>

</body>

</html>