问列出并选择并行HTML预览PDF

EN

<div class="wrap">
    <div class="column_left">
        <!-- your list of items. Example; -->
        <ul>
            <li class="pdf_link" data-pdf="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">Example PDF</li>
        </ul>
    </div>
    <div class="column_right">
    
    </div>
</div>

  html, body {
    position: relative;
    height: 100%;
    }

  .wrap {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }

  .column_left {
    width: calc(30% - 10px);
    height: 100%;
    border-right: 10px solid black;
    overflow: auto;
    }

  .column_right {
    width: 70%;
    height: 100%;
    overflow: auto;
    }

  ul {
    height: 100%;
    }

  li.pdf_link {
    cursor: pointer;
    }

  li.pdf_link:hover {
    color: blue;
    }

let el_listItems = document.querySelectorAll('.pdf_link');
let el_pdfContainer = document.querySelector('.column_right');

el_listItems.forEach(el => {
    el.addEventListener('click', openPDF);
});

function openPDF(e)
{
    let pdfLink = this.getAttribute('data-pdf');
    el_pdfContainer.innerHTML = `<object data="${pdfLink}" type="application/pdf" width="100%" height="100%">
                                    <p>Your browser doesn't seem to support PDF files.</p>
                                    <a href="${pdfLink}">Or click here to download the PDF</a>
                                </object>`;
}