前端vue實現pdf文件的在線預覽

3.前端vue實現pdf文件的在線預覽

我是通過 <iframe> 標簽就可以滿足我工作的 pdf預覽需求 如果<iframe> 無法滿足需求 ， 可以使用 pdf.js這個插件，功能強大。

<iframe
    :src="url"
    type="application/x-google-chrome-pdf"
    width="100%"
    height="100%" />
    
export default {    
    data() {
        return {
            url: ``,
        };
}      

mounted() {
        this.url=`http://192.168.1.110:5000/assets/doc/xx調度方案7.pdf`;
    }

游覽器中在線的內容

這是控制台中有關pdf的內容

可以看到 ， 之前的 <iframe /> 標簽被替換成<embed> , 而且游覽器會自動增加相關pdf的插件