vue-pdf实现PDF文件预览、缩放、旋转、下载、保存等功能

已于 2023-07-04 10:42:44 修改
阅读量1.7k 收藏 10
点赞数 4
分类专栏： vue 文章标签： vue.js pdf
于 2023-07-04 10:26:08 首次发布
原文链接：https://blog.csdn.net/qq_44722915/article/details/119611359
版权

预览效果
在这里插入图片描述

一、安装npm install vue-pdf
二、组件引入并注册
//引入插件
import pdf from 'vue-pdf'
//注册组件
export default{
    components: {
	    pdf
    }
}
三、页面使用

⚠️注意：加载本地的 PDF 文件，要放在 public 目录下，访问路径如 ‘/static/3.pdf’

<pdf :src="src" ></pdf>
所以代码如下：
<template>
<div>
    <el-button type="primary" size="small" class="btn" @click="dialogVisible = true">{{btnText}}</el-button>
    <el-dialog title="PDF 预览" :visible.sync="dialogVisible" :close-on-click-modal="false" width="500">
        <div class="tools">
            <el-button type="text" @click="FirstPage()">
                <el-tooltip class="item" effect="light" content="第一页" placement="top">
                    <i class="el-icon-d-arrow-left"></i>
                </el-tooltip>
            </el-button>
            <el-button type="text" @click="changePdfPage(0)">
                <el-tooltip class="item" effect="light" content="上一页" placement="top">
                    <i class="el-icon-arrow-left"></i>
                </el-tooltip>
            </el-button>
            <el-button type="text" @click="changePdfPage(1)">
                <el-tooltip class="item" effect="light" content="下一页" placement="top">
                    <i class="el-icon-arrow-right"></i>
                </el-tooltip>
            </el-button>
            <el-button type="text" @click="lastPage()">
                <el-tooltip class="item" effect="light" content="最后一页" placement="top">
                    <i class="el-icon-d-arrow-right"></i>
                </el-tooltip>
            </el-button>
            <el-button type="text" @click="setIsExit()" v-show="!isExit" style="margin-right:10px;">
                <el-tooltip class="item" effect="light" content="页码选择" placement="top">
                    <i class="el-icon-setting"></i>
                </el-tooltip>
            </el-button>
            <el-tooltip class="item" effect="light" content="页码选择" placement="top" v-show="isExit">
                <el-select v-model="value" placeholder="请选择" @change="pageSelect" size="mini">
                    <el-option v-for="item in pageCount" :key="item" :label="'第 '+item+' 页'" :value="item"></el-option>
                </el-select>
            </el-tooltip>
            <el-button type="text" @click="scaleD()">
                <el-tooltip class="item" effect="light" content="放大" placement="top">
                    <i class="el-icon-zoom-in"></i>
                </el-tooltip>
            </el-button>
            <el-button type="text" @click="scaleX()">
                <el-tooltip class="item" effect="light" content="缩小" placement="top">
                    <i class="el-icon-zoom-out"></i>
                </el-tooltip>
            </el-button>
            <el-button type="text" @click="clock()">
                <el-tooltip class="item" effect="light" content="顺时针旋转" placement="top">
                    <i class="el-icon-refresh-right"></i>
                </el-tooltip>
            </el-button>
            <el-button type="text" @click="counterClock()">
                <el-tooltip class="item" effect="light" content="逆时针旋转" placement="top">
                    <i class="el-icon-refresh-left"></i>
                </el-tooltip>
            </el-button>
            <el-button type="text" @click="downPDF">
                <el-tooltip class="item" effect="light" content="下载" placement="top">
                    <i class="el-icon-download"></i>
                </el-tooltip>
            </el-button>
            <el-button type="text" @click="printPDF">
                <el-tooltip class="item" effect="light" content="打印" placement="top">
                    <i class="el-icon-printer"></i>
                </el-tooltip>
            </el-button>
            <p class="total">
                <el-tooltip class="item" effect="light" content="当前页" placement="top">
                    <b style="color:#F56C6C;cursor:pointer;">{{ currentPage }}</b> </el-tooltip>&nbsp;/&nbsp;
                <el-tooltip class="item" effect="light" content="总页数" placement="top">
                    <b style="color:#67C23A;cursor:pointer;">{{ pageCount }}</b></el-tooltip>
            </p>

        </div>
        <div class="main">
            <pdf ref="pdf" id="pdf" :src="src" :page="currentPage" :rotate="pageRotate" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler"></pdf>
        </div>
    </el-dialog>
</div>
</template>

<script>
// 引入
import pdf from 'vue-pdf'
export default {
    name: 'home',
    // 注册
    components: {
        pdf
    },
    data() {
        return {
            dialogVisible: false,
            isExit: false,
            value: 1,
            btnText: 'PDF 预览 (vue-pdf 插件)',
            // 加载本地的 PDF 文件，要放在 public 目录下，访问路径如 '/static/3.pdf'
            src: '/static/3.pdf',
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            scale: 100,
            pageRotate: 0
        }
    },
    methods: {
        // pdf加载时
        loadPdfHandler() {
            this.value = this.currentPage = 1 // 加载的时候先加载第一页
        },
        // 第一页
        FirstPage() {
            this.value = this.currentPage = 1
            this.isExit = false
        },
        // 最后一页
        lastPage() {
            this.value = this.currentPage = this.pageCount
            this.isExit = false
        },
        // 改变PDF页码,val 传过来区分上一页下一页的值,0 上一页,1 下一页
        changePdfPage(val) {
            if (val === 0 && this.currentPage > 1) {
                this.currentPage--
            }
            if (val === 1 && this.currentPage < this.pageCount) {
                this.currentPage++
            }
            this.value = this.currentPage
            this.isExit = false
        },
        // 页码选择
        pageSelect() {
            this.currentPage = this.value
            this.isExit = false
        },
        // 控制下拉选择框显示隐藏
        setIsExit() {
            this.isExit = true
        },
        // 放大
        scaleD() {
            this.scale += 5
            this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
        },
        // 缩小
        scaleX() {
            if (this.scale === 100) {
                return
            }
            this.scale += -5
            this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
        },
        // 顺时针
        clock() {
            this.pageRotate += 90
        },
        // 逆时针
        counterClock() {
            this.pageRotate -= 90
        },
        // 下载
        downPDF() {
            var url = this.src
            var tempLink = document.createElement('a')
            tempLink.style.display = 'none'
            tempLink.href = url
            tempLink.setAttribute('download', 'my.pdf')
			console.log(typeof tempLink.download,11111);
            if (typeof tempLink.download === 'undefined') {
                tempLink.setAttribute('target', '_blank')
            }
            document.body.appendChild(tempLink)
            tempLink.click()
            document.body.removeChild(tempLink)
        },
        // 打印
        printPDF() {
            this.$refs.pdf.print()
        }
    }
}
</script>

<style lang="less" scoped>
.btn {
    margin: 20px 0px;
}

.main {
    border: 2px solid #dcdfe6;
    height: 600px;
    overflow: auto;
}

.tools {
    display: flex;
}

.total {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main::-webkit-scrollbar {
    width: 6px;
}

/* 修改 滚动条的 下面 的 样式 */
.main::-webkit-scrollbar-track {
    background-color: white;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

/* 修改 滑块 */
.main::-webkit-scrollbar-thumb {
    background-color: #dcdfe6;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

/deep/ .el-dialog {
    height: 735px;
    font-family: '楷体';
}

/deep/ .el-dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #303133;
}

/deep/ .el-dialog__title,
/deep/ .el-dialog__headerbtn .el-dialog__close {
    color: white;
}

/deep/ .el-dialog__body {
    padding: 20px;
}

/deep/ .el-select {
    width: 95px;
    height: 28px;
    margin: 5px 20px 0px 20px;
}
</style>

注意：
报错解决（更改依赖包 node_modules/vue-pdf/src/pdfjsWrapper.js 文件）
解决顺时针，逆时针旋转控制台报错；打印时，文字乱码等问题。通过更改依赖包 node_modules/vue-pdf/src/pdfjsWrapper.js 文件解决。下面为修改好的 pdfjsWrapper 的文件 。

import {
	PDFLinkService
} from 'pdfjs-dist/es5/web/pdf_viewer';
var pendingOperation = Promise.resolve();
export default function (PDFJS) {
	function isPDFDocumentLoadingTask(obj) {
		return typeof (obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true;
		// or: return obj.constructor.name === 'PDFDocumentLoadingTask';
	}
	function createLoadingTask(src, options) {
		var source;
		if (typeof (src) === 'string')
			source = { url: src };
		else if (src instanceof Uint8Array)
			source = {data: src};
		else if (typeof (src) === 'object' && src !== null)
			source = Object.assign({}, src);
		else
			throw new TypeError('invalid src type');
		// source.verbosity = PDFJS.VerbosityLevel.INFOS;
		// source.pdfBug = true;
		// source.stopAtErrors = true;
		if (options && options.withCredentials)
			source.withCredentials = options.withCredentials;
		var loadingTask = PDFJS.getDocument(source);
		loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not public
		if (options && options.onPassword)
			loadingTask.onPassword = options.onPassword;
		if (options && options.onProgress)
			loadingTask.onProgress = options.onProgress;
		return loadingTask;
	}
	function PDFJSWrapper(canvasElt, annotationLayerElt, emitEvent) {
		var pdfDoc = null;
		var pdfPage = null;
		var pdfRender = null;
		var canceling = false;
		canvasElt.getContext('2d').save();
		function clearCanvas() {
			canvasElt.getContext('2d').clearRect(0, 0, canvasElt.width, canvasElt.height);
		}
		function clearAnnotations() {
			while (annotationLayerElt.firstChild)
				annotationLayerElt.removeChild(annotationLayerElt.firstChild);
		}
		this.destroy = function () {
			if (pdfDoc === null)
				return;
			// Aborts all network requests and destroys worker.
			pendingOperation = pdfDoc.destroy();
			pdfDoc = null;
		}
		this.getResolutionScale = function () {
			return canvasElt.offsetWidth / canvasElt.width;
		}
		this.printPage = function (dpi, pageNumberOnly) {
			if (pdfPage === null)
				return;
			// 1in == 72pt
			// 1in == 96px
			var PRINT_RESOLUTION = dpi === undefined ? 150 : dpi;
			var PRINT_UNITS = PRINT_RESOLUTION / 72.0;
			var CSS_UNITS = 96.0 / 72.0;
			var printContainerElement = document.createElement('div');
			printContainerElement.setAttribute('id', 'print-container')
			function removePrintContainer() {
				printContainerElement.parentNode.removeChild(printContainerElement);
			}
			new Promise(function (resolve, reject) {
					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
							});
							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 }' +
								'#print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }' +
								'body > *:not(#print-container) { display: none; }' +
								'}' +
								'@media screen {' +
								'body { margin: 0 }' +
								'}'
							return win;
						})
				})
				.then(function (win) {
					var allPages = [];
					for (var pageNumber = 1; pageNumber <= pdfDoc.numPages; ++pageNumber) {
						if (pageNumberOnly !== undefined && pageNumberOnly.indexOf(pageNumber) === -1)
							continue;
						allPages.push(
							pdfDoc.getPage(pageNumber)
							.then(function (page) {
								var viewport = page.getViewport({
									scale: 1
								});
								var printCanvasElt = printContainerElement.appendChild(win.document.createElement('canvas'));
								printCanvasElt.setAttribute('id', 'print-canvas')
								printCanvasElt.width = (viewport.width * PRINT_UNITS);
								printCanvasElt.height = (viewport.height * PRINT_UNITS);
								return page.render({
									canvasContext: printCanvasElt.getContext('2d'),
									transform: [ // Additional transform, applied just before viewport transform.
										PRINT_UNITS, 0, 0,
										PRINT_UNITS, 0, 0
									],
									viewport: viewport,
									intent: 'print'
								}).promise;
							})
						);
					}
					Promise.all(allPages)
						.then(function () {
							win.focus(); // Required for IE
							if (win.document.queryCommandSupported('print')) {
								win.document.execCommand('print', false, null);
							} else {
								win.print();
							}
							removePrintContainer();
						})
						.catch(function (err) {
							removePrintContainer();
							emitEvent('error', err);
						})
				})
		}
 
		this.renderPage = function (rotate) {
			if (pdfRender !== null) {
				if (canceling)
					return;
				canceling = true;
				pdfRender.cancel();
				// pdfRender.cancel().catch(function (err) {
				// 	emitEvent('error', err);
				// });
				return;
			}
			if (pdfPage === null)
				return;
			var pageRotate = (pdfPage.rotate === undefined ? 0 : pdfPage.rotate) + (rotate === undefined ? 0 : rotate);
			var scale = canvasElt.offsetWidth / pdfPage.getViewport({
				scale: 1
			}).width * (window.devicePixelRatio || 1);
			var viewport = pdfPage.getViewport({
				scale: scale,
				rotation: pageRotate
			});
			emitEvent('page-size', viewport.width, viewport.height, scale);
			canvasElt.width = viewport.width;
			canvasElt.height = viewport.height;
			pdfRender = pdfPage.render({
				canvasContext: canvasElt.getContext('2d'),
				viewport: viewport
			});
			annotationLayerElt.style.visibility = 'hidden';
			clearAnnotations();
			var viewer = {
				scrollPageIntoView: function (params) {
					emitEvent('link-clicked', params.pageNumber)
				},
			};
			var linkService = new PDFLinkService();
			linkService.setDocument(pdfDoc);
			linkService.setViewer(viewer);
			pendingOperation = pendingOperation.then(function () {
				var getAnnotationsOperation =
					pdfPage.getAnnotations({
						intent: 'display'
					})
					.then(function (annotations) {
 
						PDFJS.AnnotationLayer.render({
							viewport: viewport.clone({
								dontFlip: true
							}),
							div: annotationLayerElt,
							annotations: annotations,
							page: pdfPage,
							linkService: linkService,
							renderInteractiveForms: false
						});
					});
				var pdfRenderOperation =
					pdfRender.promise
					.then(function () {
						annotationLayerElt.style.visibility = '';
						canceling = false;
						pdfRender = null;
					})
					.catch(function (err) {
						pdfRender = null;
						if (err instanceof PDFJS.RenderingCancelledException) {
							canceling = false;
							this.renderPage(rotate);
							return;
						}
						emitEvent('error', err);
					}.bind(this))
				return Promise.all([getAnnotationsOperation, pdfRenderOperation]);
			}.bind(this));
		}
		this.forEachPage = function (pageCallback) {
			var numPages = pdfDoc.numPages;
			(function next(pageNum) {
				pdfDoc.getPage(pageNum)
					.then(pageCallback)
					.then(function () {
						if (++pageNum <= numPages)
							next(pageNum);
					})
			})(1);
		}
		this.loadPage = function (pageNumber, rotate) {
			pdfPage = null;
			if (pdfDoc === null)
				return;
			pendingOperation = pendingOperation.then(function () {
					return pdfDoc.getPage(pageNumber);
				})
				.then(function (page) {
					pdfPage = page;
					this.renderPage(rotate);
					emitEvent('page-loaded', page.pageNumber);
				}.bind(this))
				.catch(function (err) {
					clearCanvas();
					clearAnnotations();
					emitEvent('error', err);
				});
		}
		this.loadDocument = function (src) {
			pdfDoc = null;
			pdfPage = null;
			emitEvent('num-pages', undefined);
			if (!src) {
				canvasElt.removeAttribute('width');
				canvasElt.removeAttribute('height');
				clearAnnotations();
				return;
			}
			// wait for pending operation ends
			pendingOperation = pendingOperation.then(function () {
					var loadingTask;
					if (isPDFDocumentLoadingTask(src)) {
						if (src.destroyed) {
							emitEvent('error', new Error('loadingTask has been destroyed'));
							return
						}
						loadingTask = src;
					} else {
						loadingTask = createLoadingTask(src, {
							onPassword: function (updatePassword, reason) {
								var reasonStr;
								switch (reason) {
									case PDFJS.PasswordResponses.NEED_PASSWORD:
										reasonStr = 'NEED_PASSWORD';
										break;
									case PDFJS.PasswordResponses.INCORRECT_PASSWORD:
										reasonStr = 'INCORRECT_PASSWORD';
										break;
								}
								emitEvent('password', updatePassword, reasonStr);
							},
							onProgress: function (status) {
								var ratio = status.loaded / status.total;
								emitEvent('progress', Math.min(ratio, 1));
							}
						});
					}
					return loadingTask.promise;
				})
				.then(function (pdf) {
					pdfDoc = pdf;
					emitEvent('num-pages', pdf.numPages);
					emitEvent('loaded');
				})
				.catch(function (err) {
					clearCanvas();
					clearAnnotations();
					emitEvent('error', err);
				})
		}
		annotationLayerElt.style.transformOrigin = '0 0';
	}
	return {
		createLoadingTask: createLoadingTask,
		PDFJSWrapper: PDFJSWrapper,
	}
}
吃葡萄不吐葡萄皮嘻嘻
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue element el-upload附件上传、在线预览、下载当前预览文件
听见涛声
08-02 3635
【代码】vue element el-upload附件上传、在线预览、下载当前预览文件。
vue-pdf 预览pdf (数据流)
最新发布
reembarkation的博客
03-21 688
vue-pdf 预览pdf (数据流)
vue项目使用vue-pdf插件预览pdf文件
weixin_44293690的博客
01-04 917
vue项目使用vue-pdf插件预览pdf文件
Vue+ElementUI使用vue-pdf实现预览功能
10-15
主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vuejs官方文档PDF版
02-27
vue官网文档看着不方便，自己整理了一份pdf版，方便上下班路上看。
pdf预览上传放大缩小分页
06-30
PDF预览下载放大缩小分页的功能
vue前端预览pdf并加水印、ofd文件，控制打印、下载、另存，vue-pdf的使用方法以及在开发中所踩过的坑合集
zhangzuying的博客
06-21 1万+
根据公司的实际项目需求，要求实现对pdf和ofd文件的预览，并且需要限制用户是否可以下载、打印、另存pdf、ofd文件，如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单，直接调用浏览器的预览就可以而且功能也比较全，但是一涉及到禁止用户打印、另存的话就不可以用浏览器自带的预览方式了。那就只能寻找插件来模拟了，之前在eletron-vue项目中使用过pdfjs以及vue-pdf插件，效果不是特别好
【Vue】vue中使用pdf，看这篇就够了~
weixin_42678675的博客
11-17 6万+
1. 需求   最近接到一个需求，需要在 vue 的 pc 端中嵌入用户帮助手册的PDF文件，且由于是保密文件，因此禁止用户进行打印、下载等相关操作。需要实现出来的需求点如下： PDF展示 每一页进行懒加载（或用进度条加载给与用户反馈） 禁止打印、下载PDF（或加大用户打印、下载文件的难度成本） 2. PDF 组件选型 通过查找资料，主流的可以找到的有如下几种方案，其中最为成熟的方案是 vue-pdf vue-pdf 官方文档：较为完善的 vue-PDF 解决方案。 vueshowpdf：网络上找
vue中运用vue-pdf实现pdf分页预览及缩放(可解决pdf预览不清晰问题)
m0_71537867的博客
07-08 1万+
vue中运用vue-pdf实现pdf分页预览及缩放(可解决pdf预览不清晰问题)
vue-pdf 一个基于vue的pdf预览插件(vue2.x)
哥伦比亚。的博客
03-19 4万+
vue-pdf 的使用示例 (vue2.x)
vue 使用 vue-pdf 实现pdf在线预览的示例代码
11-21
背景 之前的demo增加了图片预览，于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了，说干就干，刚开始查了很多教程，我发现很多人都在说什么pdf.js这个库，这当然没什么问题，pdf.js的确可以非常完美的实现pdf在线预览的过程，但是感觉这样直接进去有点不太优雅，于是找找看看有没有什么现成的组件，发现有vue-pdf这个组件，虽然说它没有原生那样强大，比如不支持pdf文字复制，打印会乱码，但是我感觉已经足以满足我的需求了。本篇笔记循序渐进，从基础的demo，到一个可用的程度，文末列出了大家在实际使用的过程中可能会遇到的问题和解决方案。 安装： 这个没有啥背景知识可讲，我们直接跳
vue-pdf预览pdf文件流
01-13
在vue中引入vue-pdf插件预览pdf文件流
elementui+vue管理后台-文件上传下载与预览
xwc999
12-13 3055
【代码】elementui+vue管理后台-文件上传下载与预览。
使用element-ui的el-image图片预览功能 支持图片下载
qq_42828496的博客
08-01 9762
项目场景： 工作中我们常用会到 vue+element，其中预览组件难免会涉及到下载功能，或者其它扩展功能，但是el-image 支持的只是 简单放大旋转功能，解决方法 要么 修改组件，要么 通过 js动态渲染进去，接下来看操作 解决方法： 通过点击放大时，添加点击事件，然后通过append 添加 按钮并且绑定事件，还是看下图吧，兄弟们，粘起来 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&gt
vue项目中使用pdf.js预览pdf文件
热门推荐
shentibeitaokong的博客
05-02 18万+
项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己先了解了一下，最后决定用pdf.js， 但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！ 其实 这和前端框架无关的，直接使用pdf.js原生 搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生 的是最...
保姆级vue-pdf的使用过程
2201_75705263的博客
11-13 4505
保姆级vue-pdf的使用过程，vue.runtime.esm.js:4605 [Vue warn]: Error in mounted hook: "TypeError: loadingTask.then is not a function"
在vue中实现pdf预览功能（vue-pdf 的使用）
qq_48378883的博客
06-19 2802
window.open(url,"_blank") //跳转页面利用浏览器打开pdf （浏览器打开pdf可复制）this.gkbSrc=pdf.createLoadingTask('api接口')this.gkbSrc =pdf.createLoadingTask(api接口）1.下载安装vue-pdf插件。5.在data设置初始值。
vue使用vue-pdf
hzqzzz的博客
06-15 1万+
vue使用vue-pdf
使用vue-pdf-embed实现在线预览文档
09-09
要使用vue-pdf-embed组件实现在线预览文档，首先需要在项目中导入pdfPreview组件。然后，在需要预览文档的地方添加如下代码： ``` <pdfPreview v-if="store.state.pdfUrl" :pdfUrl="store.state.pdfUrl" @close="store.state.pdfUrl = null" /> ``` 其中，pdfUrl是一个存储PDF文件链接的变量，通过设置该变量可以实现预览不同的PDF文件。在双击表格某个单元格触发事件时，可以通过更改showPdf的值来控制dialog弹出层的显示和隐藏。 弹出层中包含一个div和一个embed元素，embed用于预览PDF文件。通过设置embed的src属性为pdfUrl，可以实现在线预览文档。 总结起来，使用vue-pdf-embed组件实现在线预览文档的步骤如下： 1. 导入pdfPreview组件。 2. 在需要预览文档的地方添加pdfPreview组件，设置pdfUrl变量和close事件。 3. 在事件中更改showPdf的值来控制dialog弹出层的显示和隐藏。 4. 在弹出层中使用embed元素来预览PDF文件，设置src属性为pdfUrl。 通过以上步骤，你可以使用vue-pdf-embed组件实现在线预览文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值