Saya sedang membuat tapak web portfolio untuk diri saya sendiri sebagai apl Reactweb. Saya ingin mempunyai halaman resume di laman web yang hanya memaparkan resume saya. Apabila saya mula-mula membuat versi HTML tapak, saya dapat menggunakan iframe untuk mencapai ini. Apabila saya mencuba ini dalam React, iframe memaparkan salinan halaman yang sedang dipaparkan dan bukannya pdf saya. Adakah terdapat cara mudah untuk memaparkan pdf yang disimpan secara tempatan dalam aplikasi web?

Hanya paparkan fail PDF setempat dalam apl web React anda

Saya sedang membuat tapak web portfolio untuk diri saya sendiri sebagai apl web React. Saya ingin mempunyai halaman resume di laman web yang hanya memaparkan resume saya. Apabila saya mula-mula membuat versi HTML tapak, saya dapat menggunakan iframes untuk mencapai ini.

Apabila saya mencuba ini dalam React, iframe memaparkan salinan halaman yang sedang dipaparkan dan bukannya pdf saya. Adakah terdapat cara mudah untuk memaparkan pdf yang disimpan secara tempatan dalam aplikasi web?

P粉653045807260 hari yang lalu382

membalas semua(2)saya akan balas

P粉0072885932024-02-26 13:51:39

Anda boleh menggunakan teg <embed> terbina dalam dalam HTML.

Sebagai contoh, format berikut memaparkan dokumen pdf pada laluan yang diberikan dengan lebar 150% dan lebar 650 piksel.

Anda boleh melaraskan lebar dan tinggi mengikut keperluan anda.

balas

P粉3561286762024-02-26 00:28:14

Sebarang penyemak imbas « Benamkan fail PDF ke dalam iframe menggunakan _Pemapar Dokumen Google Boleh Benam.

</pre>

Saya tidak pasti apa yang anda maksudkan dengan "paparkan salinan halaman yang sedang dipaparkan"
Anda boleh memberikan maklumat lanjut melalui tangkapan skrin.
Anda juga boleh menggunakan pdf daripada googleDocs dan bukannya menyimpan pdf dalam projek anda.</p><span class="detail_answer2" style="float: left" fid="258729"><div class="btn wenda-second-btn" name="P粉356128676" fid="258729">balas</div></span><i class="layui-icon layui-icon-praise wenda-praise-btn"><span>0</span></i></div></li><div class='more'></div></div><div class='discuss-submit bg-white'><li class='info layui-clear'><span class='f-left' id='discuss-submit-close'>Batal</span><span class='f-left wenda-reply-text'>balas</span></li><li class='layui-clear'><textarea type='text' rows="6" placeholder="Sila masukkan kandungan untuk semakan anda" class="wenda-reply-content-text"></textarea></li><li class='layui-clear'><button class="layui-btn layui-btn-danger f-right wenda-reply-publish-button">menerbitkan</button></li></div><div class='lock-screen' id='lock-screen'></div><script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><div class="headerMask"></div><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><p>Rumah</p></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><p>Kursus</p></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><p>Soal Jawab</p></a></li><li><a href="http://m.php.cn/ms/login"><b class="icon5"></b><p>saya</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ms/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><span>Rumah</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><span>Kursus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><span>Soal Jawab</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/dic.html"><b class="icon6"></b><span>Kamus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/xiazai/"><b class="icon8"></b><span>Muat turun</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/faq/zt" title="Topik"><b class="icon12"></b><span>Topik</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ms/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ms/" >Rumah</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/article.html" >Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/wenda.html" class="hover">Soal Jawab</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/course.html" >Kursus</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/faq/zt" >Topik</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/xiazai"  >Muat turun</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/game" >Permainan</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/dic.html" >Kamus</a></div><div class="clear"></div></div></div><div class="langadivs"  ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a  onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan "  href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a  onclick="javascript:setlang('en');" class="language course-right-orders chooselan "  href="javascript:;"><span>English</span><span>（EN）</span></a><a  onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan "  href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a  onclick="javascript:setlang('ja');" class="language course-right-orders chooselan "  href="javascript:;"><span>日本語</span><span>（JA）</span></a><a  onclick="javascript:setlang('ko');" class="language course-right-orders chooselan "  href="javascript:;"><span>한국어</span><span>（KO）</span></a><a  onclick="javascript:;" class="language course-right-orders chooselan chooselanguage"  href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a  onclick="javascript:setlang('fr');" class="language course-right-orders chooselan "  href="javascript:;"><span>Français</span><span>（FR）</span></a><a  onclick="javascript:setlang('de');" class="language course-right-orders chooselan "  href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script>            var swiper = new Swiper('.nphpNavSwiper1', {
                slidesPerView : 'auto',
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper

            });
        </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></body></html>