How to realize PDF preview and download?

Foreword

Preview and Download for PDF type invoices were requested during development, **PDF ** type file sources include H5 mobile terminal and **PC terminal**, and for these two different The processing of the terminal will be slightly different, which will be mentioned below.

There are many articles about PDF preview, but none of them seem to mention the possible problems, or how to choose the corresponding specific demand scenarios. Therefore, the article The core is to see which of the current implementation solutions is more suitable in combination with the actual demand scenario. Of course, I hope that everyone can correct the content in the article in the comment area, or provide a better solution.

Basic Requirements:

Support for full preview of the content of pdf files
Multi-page pdf files support page view
PC and mobile need to support download and preview< /strong>

Product Requirements:

The PC preview should support previewing on the current page

pdf file The font in the preview should be consistent with the font of the actual file

9E27229A.gif

PDF preview

Putting aside the various requirements above, let’s first summarize several common ways to realize PDF preview:

With the help of various class libraries, code-based preview, such as the package based on **`pdfjs-dist`**^[1]

Directly based on the built-in PDF preview plugin of each browser, such as , <embed src="xxx "></code></strong></p> <p><center></center></p> </li> <li> <p><strong>The server converts the <code>PDF</code> file into an image</strong></p> </li> </ul> <p>Next, let’s take a look at how the above solutions are implemented and whether they meet the requirements provided above!</p> <h2><code><embed> / <iframe></code> achieve preview</h2> <h3><code><embed></code> tag</h3> <p>The <strong><code><embed></code> element</strong> embeds external content at a specified location in the document, generated by an <strong>external application</strong> or <strong>other source of interactive content </strong> (such as <strong>browser plug-ins</strong>).</p> <p>To put it simply, the resource displayed by using <code><embed></code> is completely provided by the display function provided by its environment, that is, if the current application environment supports the display of this resource, it can be displayed normally. It cannot be displayed if it is not supported.</p> <p>It is also very simple to use:</p> <pre><embed type="application/pdf" :src="pdfUrl" width="800" height="600" /> Copy Code</pre> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/28041fd712343b827786f6971dce5247.jpeg" alt="28041fd712343b827786f6971dce5247.jpeg"></p> <blockquote> <p>Most modern browsers have deprecated and canceled the support for browser plug-ins, and now it is not recommended to use <code><embed></code> tags, but you can use <code><img>, <iframe>, <video >, <audio></code> and other tags instead.</p> </blockquote> <h3><code><iframe></code> tag</h3> <p>The method based on <code><iframe></code> is similar to the above, and the overall effect is also the same, so it will not be shown here:</p> <pre><iframe :src="pdfUrl" width="800" height="600" /> Copy Code</pre> <p>It is worth noting that even if <code><iframe></code> is used, after actually expanding its inner structure, you will find:</p> <p><center></center></p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/45ee79955aa49a22876b2dcd02036e87.jpeg" alt="45ee79955aa49a22876b2dcd02036e87.jpeg"></p> <p><strong>Is it inside the <code><embed></code> tag? What’s going on here, doesn’t it mean that <code><embed></code> is best deprecated? </strong></p> <p>First, check the compatibility in **`caniuse`**<sup>[2]</sup>, as follows:</p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/ecc87f041e03d6814480b43ef3bc42ac.jpeg" alt="ecc87f041e03d6814480b43ef3bc42ac.jpeg"></p> <p>Let’s find another browser that does not support <code><embed></code>, such as <code>IE</code>, to try the effect:</p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/7f75c3ea10624b4d810116e4122a0466.jpeg" alt="7f75c3ea10624b4d810116e4122a0466.jpeg"></p> <p>Try replacing it with <code><iframe></code>, as follows:</p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/5855f856773a09a111a1de8cf3a9084b.jpeg" alt="5855f856773a09a111a1de8cf3a9084b.jpeg"></p> <p>Obviously, <code><embed></code> cannot be displayed directly in an incompatible environment, while <code><iframe></code> can be recognized normally, but <code><iframe></code> The loaded resource cannot be processed by <code>IE</code> browser, that is, the essential reason is that <strong><code>IE</code></strong> browser does not support similar <strong><code> Preview of files such as PDF</code></strong>, such as when trying to enter <code>http://127.0.0.1:3000/src/assets/2.pdf</code> directly in the address bar will get :</p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/5cc075f2730727da938e6bef9e4e6564.jpeg" alt="5cc075f2730727da938e6bef9e4e6564.jpeg"></p> <p>Therefore, under normal circumstances, when the browser does not support inline <code>PDF</code>, it should provide a fallback link of <code>PDF</code>, which is realized by downloading, and this is * *pdfobject**<sup>[3]</sup> does, in fact, its source code content is relatively simple, the core is that <strong>PDFObject will detect the browser’s support for inline/embedded PDF, if it supports embedding, If the browser does not support embedding, the PDF will not be embedded and a fallback link to the PDF will be provided</strong>, such as in <code>IE</code>:</p> <p> <IMG SRC = \ "// i2.wp.com/img-blog.csdnimg.cn/img_convert/c3452705191c593c969212bc7e00d.jpeg " alt = \ "c3452705191c93c9696922 12bc7e00d.jpeg \ "></p> <p>In fact, this is just to help us write less compatible code, and it does not necessarily meet most people’s scenarios. It is mentioned here only because of the existence of <code><embed></code> connect.</p> <h2>vue3-pdfjs implementation preview</h2> <h3>Why not just use <code>pdfjs-dist</code>?</h3> <p> <IMG SRC = \ "// i2.wp.com/img-blog.csdnimg.cn/img_convert/362050A836A53A81967272319df.jpeg " alt = \ "362050A8364A819672727272727272727272727272727 d9392319df.jpeg \ "></p> <p>**pdf.js**<sup>[4]</sup> A few obvious points to complain about:</p> <ul> <li> <p>The package name is not uniform, the package on <code>npm</code> is called <code>pdfjs-dist</code>, but in <code>Readme</code> it is also called <code>pdf. js</code></p> </li> <li> <p>There is no clear document as a guide, only the contents of the <code>examples</code> directory in its warehouse can be used as a reference</p> </li> <li> <p>The official examples are not friendly enough, for example, no relevant examples such as <code>vue/react</code> are provided</p> </li> <li> <p>Direct use needs to introduce a lot of content that is not specified in the document</p> </li> <li> <p>Sometimes displayed <code>pdf</code> content is blurry or missing parts, etc.</p> </li> <li> <p>…</p> </li> </ul> <p>Therefore, since there is already a package based on <code>vue/react</code>, it is directly used as a demonstration here.</p> <h3>Specific use</h3> <p>For the installation and usage process, please refer to **`vue3-pdfjs`**<sup>[5]</sup> , the specific <code>Vue3</code> sample code is as follows:</p> <pre><script setup lang="ts"> import { onMounted, ref } from 'vue' import { VuePdf, createLoadingTask } from 'vue3-pdfjs/esm' import type { VuePdfPropsType } from 'vue3-pdfjs/components/vue-pdf/vue-pdf-props' // Prop type definitions can also be imported import type { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api' import pdfUrl from './assets/You-Dont-Know-JS.pdf' const pdfSrc = ref<VuePdfPropsType['src']>(pdfUrl) const numOfPages = ref(0) onMounted(() => { const loadingTask = createLoadingTask(pdfSrc. value) loadingTask.promise.then((pdf: PDFDocumentProxy) => { numOfPages.value = pdf.numPages }) }) </script> <template> <VuePdf v-for="page in numOfPages" :key="page" :src="pdfSrc" :page="page" /> </template> <style> @import '@/assets/base.css'; </style> Copy Code</pre> <p><strong>The effect is as follows:</strong></p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/5ffd1a7cc953c557e59032344add1cf4.jpeg" alt="5ffd1a7cc953c557e59032344add1cf4.jpeg"></p> <h3>There is a problem</h3> <p>It seems that there is no major problem in loading a normal <code>pdf document</code></strong>, let’s try loading a <code>pdf invoice</code> to see, but because the actual invoice has more sensitive information There are many, so I won’t post the original invoice content here, just look at the previewed invoice content:</p> <ul> <li> <p>Obviously, the <strong>contents of the overall invoice are missing a lot</strong>. Although most of some invoices can be displayed, the <strong>invoice title</strong> and <strong>stamp</strong> may not be normal display etc.</p> <p><img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/9facde95bbbb26f0b7761915cdad1438.jpeg" alt="9facde95bbbb26f0b7761915cdad1438.jpeg"><img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/42890796bcb73bcf5ef716e3d1e86d34.jpeg" alt="42890796bcb73bcf5ef716e3d1e86d34.jpeg"></p> </li> </ul> <blockquote> <p>【<strong>Note</strong>】The complete content cannot be displayed because <code>pdf.js</code> requires the support of some font libraries, if some fonts in the <code>original PDF file</code> do not The matching font library will not be displayed in <code>pdf.js</code>, and the font library is stored in the <code>cmaps</code> folder <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/802a5994bb76fd3335bd960ebb8c75c7.jpeg" alt="802a5994bb76fd3335bd960ebb8c75c7.jpeg"></p> </blockquote> <ul> <li> <p>In addition, the <strong>previewed font</strong> and the <strong>actual font</strong> are <strong>inconsistent</strong>, and due to the particularity of the invoice, there is greater consistency in the font After all, if the font of the same invoice is inconsistent, it will lack standardization and legality (~~<code>The statement when the font is required to be consistent</code>~~) <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/cf652a0e18d5556c65627fffb1a9f7fb.jpeg" alt="cf652a0e18d5556c65627fffb1a9f7fb.jpeg"></p> </li> </ul> <blockquote> <p>Common solutions: **Solve the problem that pdf.js cannot fully display the content of the pdf file**<sup>[6]</sup>, in fact, it is still analyzed according to the error information of the execution environment, and the source code content needs to be forcibly modified.</p> </blockquote> <h3>Mozilla Firefox</h3> <p>The built-in PDF reader of Mozilla Firefox is actually <code>pdf.js</code>, you can preview the <code>pdf</code> file directly with Firefox browser, as follows:</p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/2575f432aff35a1efc88348f0bcef0d6.jpeg" alt="2575f432aff35a1efc88348f0bcef0d6.jpeg"></p> <p>And most of the libraries <code>vue-pdf, vue3-pdfjs</code> based on the secondary packaging of <code>pdf.js</code> usually cannot be displayed when previewing the invoice of the <code>pdf</code> file The complete content requires more or less changes to the source code, but the built-in <code>pdf.js</code> in <code>Firefox</code> can completely display the corresponding <code>pdf</code> the contents of the file.</p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/cfe84d7666bd4208daddacab2739ec59.jpeg" alt="cfe84d7666bd4208daddacab2739ec59.jpeg"></p> <h2><code>PDF</code> convert <code>image</code> to achieve preview</h2> <p>This method should go without saying. The core is that when the server responds to the <code>pdf</code> file, it first converts it into an image type and then returns it. The front end can directly display the specific image content.</p> <h3>Concrete implementation</h3> <p>The following is simulated by using <code>node</code>:</p> <pre>const pdf = require('pdf-poppler') const path = require('path') const Koa = require('koa') const koaStatic = require('koa-static') const cors = require('koa-cors') const app = new Koa() // cross domain app. use(cors()) // static resource app.use(koaStatic('./server')) function getFileName(filePath) { return filePath .split('/') .pop() .replace(/\.[^/.] + $/, '') } function pdf2png(filePath) { // get the file name const fileName = getFileName(filePath); const dir = path.dirname(filePath); // configuration parameters const options = { format: 'png', out_dir: dir, out_prefix: fileName, page: null, } // convert pdf to png return pdf .convert(filePath, options) .then((res) => { console.log('Successfully converted!') return `http://127.0.0.1:4000${dir.replace('./server','')}/${fileName}-1.png` }) .catch((error) => { console. error(error) }) } // response app. use(async (ctx) => { if(ctx.path.endsWith('/getPdf')){ const url = await pdf2png('./server/pdf/2.pdf') ctx.body = {url} }else{ ctx.body = 'hello world!' } }) app.listen(4000) Copy Code</pre> <h3>Avoid stepping on some pitfalls</h3> <p><strong>Pit 1: pdf-image is not recommended</strong></p> <p>When the server converts <code>pdf</code> files into images, it needs to rely on some third-party packages. At the beginning, **`pdf-image`**<sup>[7]</sup> was used package, but many abnormal errors occurred during the actual conversion. After checking the source code along the errors, it was found that it needs to rely on some additional tools, because it needs to use <code>pdfinfo xxx</code> related commands, and its corresponding There are also some similar problems on `issue`<sup>[8]</sup>, but after trying all of them, it still doesn’t work!</p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/1d74a99df8ad469d76d0578d1921ed56.jpeg" alt="1d74a99df8ad469d76d0578d1921ed56.jpeg"></p> <p>Therefore, it is more recommended to use `pdf-poppler`<sup>[9]</sup> which comes with a <code>pdftocairo</code> program that can convert <code>pdf</code> to images. However, its current version supports <strong>Windows</strong> and <strong>Mac OS</strong>, as follows:</p> <p><center></center></p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/af5ae98a7b7576baeffcdcaa0c84ab00.jpeg" alt="af5ae98a7b7576baeffcdcaa0c84ab00.jpeg"></p> <p><strong>Pit 2: path.basename not a function</strong></p> <p>In the above code content, we need to get the name of the file. In fact, we can simply use <code>path.basename(path[, suffix])</code> in <code>Node Api</code> to achieve the goal :</p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/89dcc65d7bbe7293e95c8f233f550fcc.jpeg" alt="89dcc65d7bbe7293e95c8f233f550fcc.jpeg"></p> <p>However, the following <strong>exception</strong> occurred when the program was running, and the corresponding code content and running results are as follows:</p> <pre>// configuration parameters const options = { format: 'png', out_dir: dir, out_prefix: path.baseName(filePath, path.extname(filePath)), // an exception occurred page: null, } Copy Code</pre> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/29528c07709c33f32dabfb0eaf60bb46.jpeg" alt="29528c07709c33f32dabfb0eaf60bb46.jpeg"></p> <p>I haven’t found the reason for this yet, so I can simply implement a <code>getFileName</code> method to get the name of the file.</p> <blockquote> <p><strong>Reason for error</strong>: rely too much on the automatic prompt of the editor, output basename as baseName, yes it is the difference between n and N.</p> </blockquote> <p><strong>Pit 3: Details</strong></p> <p>The above content starts the simulated business service through <code>koa</code>, because <strong>business service (<code>http://127.0.0.1:4000</code>)</strong> and <strong>application service (<code>http://127.0.0.1:3000</code>)</strong> The port is inconsistent, so it will generate <strong>cross-domain</strong>, you can pass <code>koa-cors </code> to solve, it is worth noting that sometimes <code>koa-cors</code> may not work when the business server is restarted.</p> <p>Since the content of the response is directly returned in <code>koa</code> general middleware, if you need to support business services to provide <strong>static resource</strong> access, you can use <code>koa- static</code>, it is worth noting that when you specify static file resources through <code>koa-static</code>, such as **<code>app.use(koaStatic('./static\ '))</code>**, if you directly pass <code>http://127.0.0.1:4000/static/pdf/xxx.png</code>, you will get <strong>404 Not Found</strong> error, the reason is that <strong><code>koa-static</code></strong> directly sets <strong>/static/</strong> to <strong>root path</strong> strong>, so the correct access path is: <code>http://127.0.0.1:4000/pdf/xxx.png</code>.</p> <h3>Effect demonstration</h3> <p>The content of the invoice is inconvenient to display and will not be displayed directly here. You only need to pay attention to the generated pictures and paths:</p> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/67ed0dba0b51a2a2895583bae5444413.jpeg" alt="67ed0dba0b51a2a2895583bae5444413.jpeg"></p> <h2>PDF download</h2> <p>The download here actually not only refers to the download of <code>pdf</code>, but also the download methods supported by the client side. The most common ones are as follows:</p> <ul> <li> <p><strong>a tag</strong>, eg <code><a href="xxxx" download="xxx">download</a></code></p> </li> <li> <p><strong>location.href</strong>, eg <code>window.location.href = xxx</code></p> </li> <li> <p><strong>window.open</strong>, such as <code>window.open(xxx)</code></p> </li> <li> <p><strong>Content-disposition</strong>, for example <code>Content-disposition: attachment; filename="xxx"</code></p> </li> </ul> <h2><code><a></code> realize download</h2> <p>The <code>download</code> attribute of <code><a></code> is used to instruct the browser to <strong>download the URL specified by href</strong> instead of navigating to the resource, usually prompting the user to put the It is saved as a local file. If the <code>download</code> attribute has specified content, this value will be used as the <strong>pre-filled file name</strong> during the download and save process, mainly because of the following reasons:</p> <ul> <li> <p>This value may be dynamically modified via <code>JavaScript</code></p> </li> <li> <p>Or the <code>download</code> attribute specified in <code>Content-Disposition</code> takes precedence over <code>a.download</code></p> </li> </ul> <p>This should be the most familiar method for everyone, but familiarity is familiar, and there are some points worth noting:</p> <ul> <li> <p>The <code>download</code> attribute only applies to <strong>same-origin URLs</strong></p> <ul> <li> <p><strong>Same origin URL</strong> will <strong>download</strong></p> </li> <li> <p><strong>Non-same-origin URL</strong> will <strong>navigate</strong></p> </li> <li> <p><strong>Non-same-origin resources</strong> still need to be downloaded, so they can be converted to **`blob: URL`**<sup>[10]</sup> and **`data: URL` **<sup>[11]</sup> form</p> </li> </ul> </li> <li> <p>If a different file name is specified in the **`Content-Disposition`**<sup>[12]</sup> attribute in the <strong>HTTP</strong> response header, then <strong>< content in code>Content-Disposition</code></strong></p> </li> <li> <p>HTTP If **`Content-Disposition`**<sup>[13]</sup> in the <strong>HTTP</strong> response header is set to <code>Content-Disposition='inline'</code>, then the <code>download</code> attribute of <code>Content-Disposition</code> will be used first in Firefox</p> </li> </ul> <p><strong>Static mode:</strong></p> <pre><a href="http://127.0.0.1:4000/pdf/2-1.png" download="2.pdf">Download</a> Copy Code</pre> <p><strong>Dynamic method:</strong></p> <pre>function download(url, filename){ const a = document.createElement("a"); // create a tag a.href = url; // download path a.download = filename; // download attribute, filename a.style.display = "none"; // not visible document.body.appendChild(a); // mount a.click(); // trigger click event document.body.removeChild(a); // remove } Copy Code</pre> <p><strong>Blob method</strong></p> <pre>if (reqConf. responseType == 'blob') { // return the file name let contentDisposition = config. headers['content-disposition']; if (!contentDisposition) { contentDisposition = `;filename=${decodeURI(config.headers.filename)}`; } const fileName = window.decodeURI(contentDisposition.split(`filename=`)[1]); // file type const suffix = fileName. split('.')[1]; // create blob object const blob = new Blob([config.data], { type: FileType[suffix], }); const link = document.createElement('a'); link.style.display = 'none'; link.href = URL.createObjectURL(blob); // create url object link.download = fileName; // file name after download document.body.appendChild(link); link. click(); document.body.removeChild(link); // remove the hidden a tag URL.revokeObjectURL(link.href); // destroy the url object } Copy Code</pre> <h2><code>Content-disposition</code> and <code>location.href/window.open</code> realize download</h2> <p>This seems to be three download methods, but it is actually one, and it is still based on <code>Content-disposition</code>.</p> <p><strong><code>Content-Disposition</code> response header </strong> Indicates in what form the content of the reply should be displayed, in the form of <strong>inline</strong> (that is, a web page or part of a page ), or <strong>download</strong> as an <strong>attachment</strong> and save it locally, as follows:</p> <ul> <li> <p><code>inline</code>: is the <strong>default value</strong>, indicating that the message in the reply will be displayed in the form of a part of the page or the entire page</p> <pre>Content-Disposition: inline Copy Code</pre> </li> <li> <p><code>attachment</code>: Setting this value means that the message body should be downloaded locally, and most browsers will present a “Save As” dialog with <code>filename</code> The value of is prefilled with the downloaded file name</p> <pre>Content-Disposition: attachment; filename="filename.jpg" Copy Code</pre> </li> </ul> <p>Therefore, the method based on <strong><code>location.href='xxx'</code></strong> and <strong><code>window.open(xxx)</code></strong> can Downloading is based on the form of <code>Content-Disposition: attachment; filename="filename.jpg"</code>, or it triggers the download behavior of the browser itself, which meets this condition, whether it is through <strong><code>a</code> tag jump</strong>, <strong>location.href navigation</strong>, <strong>window.open opens a new page</strong>, <strong>directly in Enter URL</strong> on the address bar to download.</p> <h2>H5 mobile terminal download</h2> <p>The <code>H5</code> mobile terminal can implement the <strong>preview</strong> operation based on the above methods, but the <strong>download</strong> operation is different, because this is To differentiate scenarios:</p> <ul> <li> <p>Based on <strong>mobile browser</strong></p> </li> <li> <p>Based on <strong>WeChat built-in browser</strong></p> </li> </ul> <p>The download method based on the <strong>mobile browser</strong> is basically the same as the content mentioned above. In essence, as long as the client supports downloading, there is no problem. However, in the <strong>WeChat built-in browser< /strong> You may not be able to meet expectations using the normal download method:</p> <ul> <li> <p>Using the normal download method in <strong><code>Android</code></strong>, a dialog box will pop up, asking if you need to wake up the <strong>mobile browser</strong> to download the corresponding resource , some models do not</p> </li> <li> <p>In <strong><code>IOS</code></strong> none of the above methods can <strong>download</strong>, so usually a new <strong><code>webview</code will be opened ></strong> to provide a preview, some models support <strong>long press the screen</strong> in the new page to save the operation, but not all models support</p> </li> </ul> <p>The essential reason is to block any <strong>download link</strong> in the <strong>WeChat built-in browser</strong>, such as <strong>APP download link</strong>, <strong>ordinary file download link </strong> and so on.</p> <h3>How else can I download the H5 mobile terminal? </h3> <p>Since this is the shielding of the download function by the <strong>WeChat built-in browser</strong> environment, there is no need to think about it (~~<code>I dare not even think about it</code>~~) Based on the <strong>WeChat built-in browser device</strong> to implement the download function, and what should be considered is how to implement <strong>indirect download</strong>:</p> <p><center></center></p> <ul> <li> <p>Determine whether it belongs to the <strong>WeChat built-in browser</strong>, and if so, help the user to automatically activate the <strong>mobile browser</strong> for downloading, but not all models support <strong>activation</strong> strong> operation, so it is best to prompt the user to download directly through the <strong>mobile browser</strong>. For the convenience of the user, you can implement the function of <strong>one-key copy</strong> to assist</p> </li> <li> <p>The other is to directly prompt that only <strong><code>PC</code> downloads are supported</strong>, and the download operation for mobile terminals is abandoned</p> </li> </ul> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/1a65369dd3b1a7d997139ff26eb3125d.jpeg" alt="1a65369dd3b1a7d997139ff26eb3125d.jpeg"><figcaption> BD272F44.gif<br /> </figcaption><h2>Last</h2> <p>In summary, there may be no way to achieve perfection in the process of implementing <code>pdf</code> preview, especially for <code>pdf</code like <strong>invoice</strong> > file, the following problems still exist:</p> <ul> <li> <p><strong>Download</strong> is not guaranteed for <strong><code>h5</code></strong> mobile devices</p> </li> <li> <p>There is no guarantee that when <strong><code>pdf</code> previews</strong>, the previewed font will match the actual invoice <strong>font</strong></p> </li> </ul> <p>Most of the existing preview methods are implemented based on <code>pdf.js</code>, and <code>pdf.js</code> internally uses <code>PDFJs.getDocument(url/buffer)</code> The method is based on <strong>file address</strong> or <strong>data stream</strong> to obtain the content, and then render the <code>pdf</code> file through <code>canvas</code>, thank you If you are interested, you can study the source code of <code>pdf.js</code>.</p> <p><code>pdf.js</code> brings a related problem that if the corresponding <code>pdf</code> file contains fonts that do not exist in <code>pdf.js</code>, then it cannot be complete Rendering, in addition, there will be differences between the rendered font and the original <code>pdf</code> file font.</p> <p>For these two points, it is found that Google’s built-in <code>pdf</code> plug-in seems to provide good support, which means that if other browsers include Google-related plug-ins (such as: Edge, QQ Browser), you can Realize the preview directly based on <code><iframe></code>, or you can only view the source file by downloading for stricter font consistency.</p> <blockquote> <p><strong>What if the product requirements cannot be met? </strong></p> <p>For example, the solutions discussed above cannot actually meet some of the requirements mentioned at the beginning of the article. The purpose of product requirements is also to provide better user experience (~~<code>under normal circumstances</code>), but these requirements still need to be implemented in technology, and we need timely feedback on the level of technical support (<code>Unless your product is technical experience</code>~~), so as a developer, you need to provide sufficient content to prove to the product, and then give some indirect implementation solutions yourself (<code> or the product itself gives come up with a new plan</code>) to see if it meets the <strong>second expectation</strong>, the core is <strong>reasonable communication + other plans</strong> (<code>Everyone’s situation is different, the actual situation Maybe... know everything</code>).</p> </blockquote> <p> <img src="//i2.wp.com/img-blog.csdnimg.cn/img_convert/a8fd18e583ed87cd78ee5380ca53b719.jpeg" alt="a8fd18e583ed87cd78ee5380ca53b719.jpeg"><figcaption> 9E38506E.jpg<br /> </figcaption><p><strong>The above are some personal opinions and understandings. If there is any inappropriateness, you can correct it in the comment area! ! ! </strong></p> <p><strong>Hope this article is helpful to you! ! ! </strong></p> <p>About this article</p> <h2>Author: Xiong Mao</h2> <p>https://juejin.cn/post/7207078219215732794</p> </div> </div> <footer class="entry-footer"> <span class="tags-links">Tagged <a href="https://syntaxbug.com/tag/load/" rel="tag">load</a>, <a href="https://syntaxbug.com/tag/pdf/" rel="tag">pdf</a>, <a href="https://syntaxbug.com/tag/pre/" rel="tag">pre</a>, <a href="https://syntaxbug.com/tag/preview/" rel="tag">preview</a>, <a href="https://syntaxbug.com/tag/review/" rel="tag">review</a>, <a href="https://syntaxbug.com/tag/view/" rel="tag">view</a></span> </footer> </article> <nav class="navigation post-navigation" role="navigation"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://syntaxbug.com/81e1f2aedc/" rel="prev">7 Awesome Java Projects You Should Know About</a></div><div class="nav-next"><a href="https://syntaxbug.com/7499b7011e/" rel="next">LLM Exploration: Environment Construction and Model Local Deployment</a></div></div> </nav> </main> </div> <aside id="secondary" class="widget-area col-sm-4"> <div id="search-2" class="widget widget_search"> <form role="search" method="get" class="search-form" action="https://syntaxbug.com/"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="search" class="search-field form-control" placeholder="Search …" value="" name="s" /> <span class="input-group-btn"> <button class="btn btn-primary search-submit" type="submit">Search</button> </span> </div> </form></div> <div id="recent-posts-2" class="widget widget_recent_entries"> <h3 class="widget-title">Recent Posts</h3> <ul> <li> <a href="https://syntaxbug.com/57135e684b/">JSDoc, an alternative to TypeScript?</a> </li> <li> <a href="https://syntaxbug.com/65a6ec3938/">What channels can Python use to receive orders?</a> </li> <li> <a href="https://syntaxbug.com/c7f8f61d81/">ADO interface _RecordsetPtr pointer</a> </li> <li> <a href="https://syntaxbug.com/3c8a7c1f35/">Unity game development–Behavior tree (Part 2)</a> </li> <li> <a href="https://syntaxbug.com/d0626f740d/">Create efficient Python backend projects: you can’t miss these tools</a> </li> <li> <a href="https://syntaxbug.com/1d42e7327e/">Classification prediction of probabilistic neural network PNN based on cuckoo algorithm optimization – code attached</a> </li> <li> <a href="https://syntaxbug.com/3d05442eb4/">HikariCP connection pool: Possibly consider using a shorter maxLifetime value.</a> </li> <li> <a href="https://syntaxbug.com/9a64438825/">Detailed explanation of java HashMap source code</a> </li> <li> <a href="https://syntaxbug.com/558593ba14/">Android drag and drop startDragAndDrop drag and drop Glide to flexibly load stacked rounded corners, Kotlin (6)</a> </li> <li> <a href="https://syntaxbug.com/e11254af61/">Qt Drag&DropDrag and place</a> </li> <li> <a href="https://syntaxbug.com/bc655f3f79/">jsp+servlet hospital appointment registration system based on javaweb+mysql (java+jdbc+jsp+mysql+ajax)</a> </li> <li> <a href="https://syntaxbug.com/6e1ad9fbfb/">k8s custom Endpoint implements internal pod access to external applications</a> </li> <li> <a href="https://syntaxbug.com/8af302413b/">MySQL Backup and Recovery: Protecting Data Security and Business Continuity</a> </li> <li> <a href="https://syntaxbug.com/6d4c2a5546/">[milkv] 2. Add and test mpu6050 driver</a> </li> <li> <a href="https://syntaxbug.com/fde4afbea8/">[milkv] 1. Light sensor bh1750 driver addition and testing</a> </li> </ul> </div></aside> </div> </div> <footer id="colophon" class="site-footer"> <div class="container"> <div class="site-info"> <div class="pull-right"> syntaxbug.com © 2021 All Rights Reserved. </div> </div> </div> </footer> </div> <div class="empty-node hidden"></div><script type='text/javascript'> var codePrettifyLoaderBaseUrl = "https:\/\/syntaxbug.com\/wp-content\/plugins\/code-prettify\/prettify"; </script> <script type='text/javascript' src='https://syntaxbug.com/wp-content/plugins/code-prettify/prettify/run_prettify.js?ver=1.4.0'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-content/themes/bestblogger/vendor/bootstrap/js/bootstrap.min.js?ver=5.0'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-content/themes/bestblogger/js/navigation.js?ver=20151215'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-content/themes/bestblogger/js/skip-link-focus-fix.js?ver=20151215'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-includes/js/comment-reply.min.js?ver=5.0'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-content/themes/bestblogger/js/script.js?ver=5.0'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-includes/js/wp-embed.min.js?ver=5.0'></script> </body> </html>