有时候需要预览PDF文件，需要实现可放大、缩小、下载、打印等成果，我使用了iframe框架。

实现效果：

实现代码：

我直接写在了一个大众组件中，在需要预览的页面直接引用该子组件即可。

<iframe :src="src" frameborder="0"></iframe> data() { return { src: ‘‘, } },

完整代码：

<!-- 预览PDF文件 --> <template> <div> <div> <div> <div>文件预览</div> <div @click="filePreviewCancel">封锁</div> </div> <div> <iframe :src="src" frameborder="0"></iframe> </div> </div> </div> </template> <script> export default { data() { return { src: ‘‘, } }, methods: { filePreviewCancel(){ this.$emit(‘filePreviewCancel‘); } } } </script> <style lang="scss" scoped> .filePreview{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: rgba($color: #000000, $alpha: 0.4); min-height: 500px; overflow: auto; .filePreview_center{ width: 50%; height: 100%; left: 25%; background: white; border-top-right-radius: 3px; border-top-left-radius: 3px; position: relative; transform: translateY(-50% -50%); padding: 16px; .center_header{ padding-bottom: 10px; border-bottom: 1px solid #dee2ed; display: flex; align-items: center; justify-content: space-between; border-radius: 3px; .header_left{ font-weight: bold; } .header_right{ cursor: pointer; color: #99a1ad; } } .center_center{ border-radius: 3px; width: 100%; height: 100%; } } } </style>

注意：

1.src为处事器上的一个PDF文件地点，可直接下载。

2.只需要一个标签和一个src地点即可实现，不需要再做其他操纵，，简单好用。

参考文章：https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html

js预览PDF文件，使用iframe实现