vue项目PDF文件预览功能_MQ

vue项目PDF文件预览功能_MQ

1、安装vue-pdf

npm install --save vue-pdf

2、简单预览（单页）

<template>
    <div>
    	<!-- 使用pdf组件 -->
        <pdf ref="pdf" :src="url"></pdf>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
   
	// 使用pdf组件
    components: {
   
        pdf
    },
    data () {
   
        return {
   
            url: "访问PDF文件的地址",
        }
    }

}
</script>

<style>
</style>

3、预览全部内容（整个PDF文件）

<template>
    <div>
        <!-- 使用pdf组件，使用循环预览全部内容 -->
        <pdf v-for="i in numPages" :key="i" :src="url" :page="i"></pdf>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
   
    // 使用pdf组件
    components: {
   
        pdf
    },
    data () {
   
        return {
   
            url: '',
            numPages: 1,
        }
    },
    mounted: function () {
   
        this.getNumPages("访问PDF文件的地址")
    },
    methods: {
   
        //根据PDF文件获取其页数
        getNumPages (url) {
   
            var pdfSrc = url
            this.pdfSrc = pdf.createLoadingTask(pdfSrc)
            this.pdfSrc.promise.then(pdf => {
   
                this.url = pdfSrc
                this.numPages = pdf.numPages
            }).catch((err) => {
   
                console.error('PDF文件加载失败!')
            })
        },
    }

}
</script>

<style>
</style>

4、PDF文件打印

// 打印PDF文件
PDFPrintAll () {
   
    // TODO
},

---

打印乱码解决，按照如下代码进行修改即可

修改文件：node_modules\vue-pdf\src\pdfjsWrapper.js

1、大概在90–165行代码

			
			// 删掉
			// var iframeElt = document.createElement('iframe');
			// 加上
			var printContainerElement = document.createElement('div');	
			printContainerElement.setAttribute('id', 'print-container')

			// 删掉
			// function removeIframe() {
   
			// 	iframeElt.parentNode.removeChild(iframeElt);
			// 加上
			function removePrintContainer () {
   
				printContainerElement.parentNode.removeChild(printContainerElement);
			}

			new Promise(function(resolve, reject) {
   
				// 删掉
				// iframeElt.frameBorder = '0';
				// iframeElt.scrolling = 'no';
				// iframeElt.width = '0px;'
				// iframeElt.height = '0px;'
				// iframeElt.style.cssText = 'position: absolute; top: 0; left: 0';
				// iframeElt.onload = function() {
   
				// 	resolve(this.contentWindow);
				// }
				// window.document.body.appendChild(iframeElt);

				//加上
				printContainerElement.frameBorder = '0';
				printContainerElement.scrolling = 'no';
				printContainerElement.width = '0px;'
				printContainerElement.height = '0px;'
				printContainerElement.style.cssText = 'position: absolute; top: 0; left: 0';

				window.document.body.appendChild(printContainerElement);
				resolve(window)				
			})
			.then(function(win) {
   

				win.document.title = '';

				return pdfDoc.getPage(1)
				.then(function(page) {
   

					var viewport = page.getViewport({
    scale: 1 });
					// 删掉
					// win.document.head.appendChild(win.document.createElement('style')).textContent =
					// 加上
					printContainerElement.appendChild(win.document.createElement('style')).textContent =
						'@supports ((size:A4) and (size:1pt 1pt)) {' +
							'@page { margin: 1pt; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' +
						'}' +

						// 加上
						'#print-canvas { display: none }' +

						'@media print {' +
							'body { margin: 0 }' +
							// 删掉
							// 'canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid }' +
							// 加上
							'#print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }' +
							'body > *:not(#print-container) { display: none; }' +