Question

我必须在新标签中显示base64 pdf。我使用下面的代码

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
   <executions>
       <execution>
           <id>copy-folder</id>
           <phase>package</phase>
           <goals>
               <goal>copy-resources</goal>
           </goals>
           <configuration>
               <outputDirectory>${project.build.directory}</outputDirectory>
               <resources>
                   <resource>
                    <filtering>false</filtering>
                    <directory>${project.basedir}/src/main/resources/folders</directory>
                   </resource>
               </resources>
           </configuration>
    </execution>
   </executions>
</plugin>

它在FireFox中工作，而不在Chrome和IE中工作。我甚至尝试使用标签，但输出相同，在FF中工作，但在Chrome和IE中没有。

我查看下面的JsFiddles，其中有效的是FF，但不适用于Chrome，

http://jsfiddle.net/yLx2W/

http://jsfiddle.net/yLx2W/1/

我的Chrome版本为：版本54.0.2840.99 m

FireFox版本：49.0.2

有任何人有任何想法，请分享。

先谢谢

Answer 1

对于那些仍然无法做到的人，我发现这个在别人的回答中，但我不记得是谁......

var objbuilder = '';
objbuilder += ('<object width="100%" height="100%" 
data="data:application/pdf;base64,');
objbuilder += (myBase64string);
objbuilder += ('" type="application/pdf" class="internal">');
objbuilder += ('<embed src="data:application/pdf;base64,');
objbuilder += (myBase64string);
objbuilder += ('" type="application/pdf"  />');
objbuilder += ('</object>');

var win = window.open("#","_blank");
var title = "my tab title";
win.document.write('<html><title>'+ title +'</title><body style="margin-top: 
0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px;">');
win.document.write(objbuilder);
win.document.write('</body></html>');
layer = jQuery(win.document);

这样我们就可以在新标签页中打开pdf。

Answer 2

它适用于您可以使用的Chrome

<iframe src="data:base64...">

<object data="data:base64...">

我面临与 IE 相同的问题：不可能显示带有base64字符串的pdf。

我必须在服务器上生成临时文件，以便使用 IE 显示它们，只使用路径显示现有文件。

您仍然可以使用 JS库来显示您的pdf，如PDF.js。

Answer 3

function printPreview(data){
        var type = 'application/pdf';
        let blob = null;
        const blobURL = URL.createObjectURL( pdfBlobConversion(data, 'application/pdf'));
        const theWindow = window.open(blobURL);
        const theDoc = theWindow.document;
        const theScript = document.createElement('script');
        function injectThis() {
            window.print();
        }
        theScript.innerHTML = 'window.onload = ${injectThis.toString()};';
        theDoc.body.appendChild(theScript);
    }
  //converts base64 to blob type for windows
    function pdfBlobConversion(b64Data, contentType) {
          contentType = contentType || '';
          var sliceSize = 512;
          b64Data = b64Data.replace(/^[^,]+,/, '');
          b64Data = b64Data.replace(/\s/g, '');
          var byteCharacters = window.atob(b64Data);
          var byteArrays = [];

          for ( var offset = 0; offset < byteCharacters.length; offset = offset + sliceSize ) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
              byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
          }

          var blob = new Blob(byteArrays, { type: contentType });
          return blob;
        }

将base64数据传递给此函数，它将在新窗口中显示pdf。这是在chrome和Firefox中无法在IE中工作。任何帮助请。我希望它也可以在IE中工作。我在将bloburl提供给window的地方给出了错误。

Answer 4

这里 '@Model.binaryDocument' 是 base64 数据

1)按型号

<object>
   <embed id="pdfID" type="text/html" width="1200" height="600" src="data:application/pdf;base64,@Model.binaryDocument" />
</object>

2)通过js

  $(document).ready(function () {
    var b64Data = "@Model.binaryDocument";
    var contentType = "application/pdf";
     const blob = b64toBlob(b64Data, contentType);
    const blobUrl = URL.createObjectURL(blob);

    window.location = blobUrl;
  })

const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) 
       {
        const slice = byteCharacters.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
}

✔ 第一个解决方案更适合防止自动下载pdf。

如何显示base64编码的pdf？

4 个答案: